Taiga UI 5 is out!

Highlight KIT

GitHub

Directive is used to highlight text in element.

You can configure the directive with TUI_HIGHLIGHT_OPTIONS token.
Allowed options:

highlightColor:
The default color for the highlight.

Use function tuiHighlightOptionsProvider to provide new value of this token.

Does not work with inline elements

Usage

MemberNicknameFate
King Arthur
-
Arrested
Sir Bedevere
The Wise
Arrested
Sir Lancelot
The Brave
Arrested
Sir Galahad
The Chaste
Killed
Sir Robin
The Not-Quite-So-Brave-As-Sir-Lancelot
Killed 
    
      
    

      
      
    

  
    
      <tui-textfield iconStart="@tui.search">
    <input
        tuiInput
        [(ngModel)]="search"
    />
    <label tuiLabel>Search</label>
</tui-textfield>

<table class="tui-space_top-4">
    <thead>
        <tr>
            <th>Member</th>
            <th>Nickname</th>
            <th>Fate</th>
        </tr>
    </thead>
    <tbody>
        @for (row of rows; track row) {
            <tr>
                @for (cell of row; track cell) {
                    <td
                        tuiHighlightColor="#228B22"
                        [tuiHighlight]="search"
                    >
                        {{ cell }}
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

    

      
      
    

  
    
      :host {
    display: block;
}

table {
    inline-size: 100%;
    border-spacing: 0;
}

th,
td {
    text-align: start;
    border: 1px solid var(--tui-border-normal);
    block-size: 3.375rem;
    padding: 0 1rem;
    vertical-align: middle;
}
GitHub StackBlitz