Highlight

Since 0.1.0-alpha.15

Text with the words of a search marked.

JavaScript off: what the HTML and CSS do on their own.

Text with the words of a search marked: each match in a mark, for search results, a filtered list or a table filtered by a FilterForm.

Usage

razor

<Highlight Text="@product.Name" Query="@Query" />
<Highlight Text="@product.Description" Query="@Query" Match="HighlightMatch.Anywhere" />

Search results

Use Query for the search: each of its words is marked where a word of Text starts, inside PascalCase names too.

Preview Code

Preview

TextField

A text box with its label, hint and errors.
TextArea

A text box for several lines.
FieldFrame

The label, hint and errors around a control of your own.

Code

Results.razor

<List Gap="3" Plain>
    @foreach (var (name, summary) in _results)
    {
        <ListItem>
            <TextBlock Weight="FontWeight.Medium"><Highlight Text="@name" Query="@Query" /></TextBlock>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted"><Highlight Text="@summary" Query="@Query" /></TextBlock>
        </ListItem>
    }
</List>

@code {
    private const string Query = "text field";

}

Matching anywhere

Use Match set to Anywhere to mark a word wherever it appears, such as a code inside a part number.

Preview Code

Preview

Valve body, part VB-4410-K

Code

Anywhere.razor

<Stack Gap="2">
    <TextBlock><Highlight Text="Valve body, part VB-4410-K" Query="410" /></TextBlock>
    <TextBlock><Highlight Text="Valve body, part VB-4410-K" Query="410" Match="HighlightMatch.Anywhere" /></TextBlock>
</Stack>

The query is split into words at spaces and punctuation, and each word is marked wherever it matches, ignoring case. By default a word matches the start of a word in the text, and the words inside a name written in PascalCase count: "field" marks the "Field" of "TextField". Overlapping matches are marked as one.

Mode support

What works in each mode, Highlight
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

The text stays one run of text; matches are mark elements inside it, which some screen readers announce as highlighted.
The marks are a tint behind the text, which keeps its color, so the contrast is the text's own.

Parameters

Highlight parameters
Prop	Type	Default
`Text`The text to show.	`string?`	Required
`Query`The search whose words are marked.	`string?`
`Match`Where a word of the query may match: at the start of a word (the default) or anywhere.	`HighlightMatch`	`HighlightMatch.WordStart`

Plus 16 item props and 4 common props.

Full API