OcFilterHighlight component

Description

The OcFilterHighlight component renders a text and highlights all occurrences of a filter term.

Examples

Default

Pass the text to render and the term whose occurrences get highlighted.

<template>
  <div class="flex flex-col gap-2">
    <oc-text-input v-model="term" label="Filter term" />
    <oc-filter-highlight text="Marie Curie" :term="term" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const term = ref('curie')
</script>

Properties

Emits

Slots