Skip to content

Latest commit

 

History

History
74 lines (58 loc) · 2.1 KB

highlight.directive.md

File metadata and controls

74 lines (58 loc) · 2.1 KB
Raw
Title Added Status Last reviewed
Highlight directive
v2.0.0
Active
2018-11-20

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>

Class members

Properties

Name Type Default value Description
classToApply string "adf-highlight" CSS class used to apply highlighting.
search string "" Text to highlight.
selector string "" Class selector for highlightable elements.

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>

This 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>

See also