mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
2a5fe7ad28
* [ADF-2596] Updated prop script to handle names from input decorators * [ADF-2596] Fixed inputs with accessors * [ADF-2596] Fixed remaining inputs with wrong names * [ADF-2596] Updated prop script to handle names from input decorators * [ADF-2596] Fixed inputs with accessors * [ADF-2596] Fixed remaining inputs with wrong names
74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
---
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2018-04-10
|
|
---
|
|
|
|
# Highlight directive
|
|
|
|
Adds highlighting to selected sections of an HTML element's content.
|
|
|
|
## Basic Usage
|
|
|
|
```HTML
|
|
<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 |
|
|
| -- | -- | -- | -- |
|
|
| adf-highlight-class | `string` | "adf-highlight" | CSS class used to apply highlighting. |
|
|
| adf-highlight | `string` | "" | Text to highlight. |
|
|
| adf-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:
|
|
|
|
```HTML
|
|
<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:
|
|
|
|
```HTML
|
|
<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
|
|
|
|
- [Text highlight pipe](text-highlight.pipe.md)
|
|
- [Highlight transform service](highlight-transform.service.md)
|