Text Highlight

Stable

Allow users to toggle between two states: on and off.

<script setup lang="ts">
import { HTextHighlight } from '@holistics/design-system'
</script>

<template>
  <div>
    <HTextHighlight
      text="VERY Very very loooong longggg text"
      highlight="very"
    />
  </div>
</template>

Examples

Case Sensitive

Use caseSensitive prop to enable case-sentitive highlight:

<script setup lang="ts">
import { HTextHighlight } from '@holistics/design-system'
</script>

<template>
  <div>
    <HTextHighlight
      text="VERY Very very loooong longggg text"
      highlight="very"
      case-sensitive
    />
  </div>
</template>

Customization via slots

<script setup lang="ts">
import { HTextHighlight } from '@holistics/design-system'
</script>

<template>
  <div>
    <HTextHighlight
      text="VERY Very very loooong longggg text"
      highlight="very"
    >
      <template #highlight="{ part }">
        <span class="relative z-0 before:absolute before:inset-x-0 before:-bottom-1 before:-z-10 before:h-1 before:rounded before:bg-green-200">{{ part }}</span>
      </template>
    </HTextHighlight>
  </div>
</template>

API

Pass-through: NO

Props

Name	Type	Description
text *	string	The original text.
highlight	string	The text to highlight.
highlights	string | string[] = p.highlight || ""	The text(s) to highlight.
caseSensitive	boolean	When true, only exact case matches are highlighted.

Slots

Name	Scoped	Description
#highlight	{ part: string; }
#text	{ part: string; }