@empathyco/x-components
Version:
Empathy X Components
76 lines (58 loc) • 2.42 kB
Markdown
---
title: Highlight
---
# Highlight
Highlights the given part of the text. The component is smart enough to do matches
between special characters like tilde, cedilla, eñe, capital letters...
## Props
| Name | Description | Type | Default |
| ------------------------------ | ------------------------------------------------------------------------------ | ------------------- | --------------- |
| <code>text</code> | The text to highlight some part of it. | <code>string</code> | <code>''</code> |
| <code>highlight</code> | The part of the text to be highlighted. | <code>string</code> | <code>''</code> |
| <code>matchClass</code> | CSS Class to add when the `text` string contains the `highlight` string. | <code>string</code> | <code>''</code> |
| <code>noMatchClass</code> | CSS Class to add when the given `text` doesn't contain the `highlight` string. | <code>string</code> | <code>''</code> |
| <code>matchingPartClass</code> | CSS Class to add to the matching text. | <code>string</code> | <code>''</code> |
## Events
This component emits no events.
## See it in action
Here you have a basic example of how the highlight component is rendered.
_Type any term in the input field to try it out!_
```vue live
<template>
<div>
<input v-model="highlight" />
<Highlight :highlight="highlight" text="milanesa" />
</div>
</template>
<script setup>
import { Highlight } from "@empathyco/x-components";
import { ref } from "vue";
const highlight = ref("");
</script>
```
### Customise the layout
This component allows to customise the whole layout.
```vue live
<template>
<div>
<input v-model="highlight" />
<Highlight
:highlight="highlight"
text="Entraña"
#default="{ hasMatch, start, match, end, text }"
>
<span class="custom-layout" v-if="hasMatch">
<strong>{{ start }}</strong>
{{ match }}
<strong>{{ end }}</strong>
</span>
<span v-else>{{ text }}</span>
</Highlight>
</div>
</template>
<script setup>
import { Highlight } from "@empathyco/x-components";
import { ref } from "vue";
const highlight = ref("entran");
</script>
```