mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
committed by
Eugenio Romano
parent
285e56e9fb
commit
5fc05da7aa
74
docs/core/directives/highlight.directive.md
Normal file
74
docs/core/directives/highlight.directive.md
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
Title: Highlight directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-20
|
||||
---
|
||||
|
||||
# [Highlight directive](../../../lib/core/directives/highlight.directive.ts "Defined in highlight.directive.ts")
|
||||
|
||||
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 |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| 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:
|
||||
|
||||
```HTML
|
||||
<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:
|
||||
|
||||
```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](../pipes/text-highlight.pipe.md)
|
||||
- [Highlight transform service](../services/highlight-transform.service.md)
|
Reference in New Issue
Block a user