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	''
noMatchClass	CSS Class to add when the given text doesn't contain the highlight string.	string	''
matchingPartClass	CSS Class to add to the matching text.	string	''

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.