1 min read

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
text The text to highlight some part of it. string ''
highlight The part of the text to be highlighted. string ''
matchClass CSS Class to add when the text string contains the highlight string. string ''

Slots

Name Description Bindings
(name - type - description)
default

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!

Customise the layout

This component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can only render a single root element.