1.9 KiB
Added, Status
| Added | Status |
|---|---|
| v2.0.0 | Active |
Highlight directive
Adds highlighting to selected sections of an HTML element's content.
Basic Usage
<div
[adf-highlight]="dance"
adf-highlight-selector=".highlightable"
adf-highlight-class="greenHighlight"
>
<div class="highlightable">You can dance if you want to</div>
</div>
Properties
| Name | Type | Default value | Description |
|---|---|---|---|
| selector | string |
'' |
Class selector for highlightable elements. |
| search | string |
'' |
Text to highlight. |
| classToApply | string |
'adf-highlight' |
CSS class used to apply highlighting. |
Details
Add adf-highlight with a search term to an element to highlight occurrences
of that term in its content. For example:
<div [adf-highlight]="'dance'" adf-highlight-selector=".highlightable">
<div class="highlightable">
You can dance if you want to
</div>
</div>
...will result in the word "dance" being highlighted. Note that you must also
specify adf-highlight-selector, a CSS selector that specifies which
elements can have their contents highlighted.
If the search string contain spaces then each section between the spaces will be treated as a separate item to highlight. For example, you could use this to highlight all occurrences of words in a list.
The highlighting works by adding an HTML <span> element around the
selected text. The <span> includes a CSS class; this defaults to
"adf-highlight" but you can supply your own class using the adf-highlight-class
property:
<div
[adf-highlight]="'dance'"
adf-highlight-selector=".highlightable"
adf-highlight-class="myGreenHighlight">
<div class="highlightable">
You can dance if you want to
</div>
</div>