Highlighter

Markeer elk voorkomen van een zoektekst in een tekenreeks, hoofdletterongevoelig tenzij je anders vraagt.

Waarom het helpt

• Markeert treffers
• Hoofdletteroptie
• Eenvoudig

Waar het past

• Zoekresultaten
• Lijsten
• Documentatie

Voorbeeld

<SearchBox @bind-Value="_query" Label="Filter" Placeholder="Try 'ar'" SearchOnInput="true" OnSearch="@(_ => { })" />
<ul>
    @foreach (var country in _countries.Where(c => string.IsNullOrEmpty(_query) || c.Contains(_query, StringComparison.OrdinalIgnoreCase)))
    {
        <li><Highlighter Text="@country" Query="@_query" /></li>
    }
</ul>

@code {
    private string? _query = "ar";
    private readonly string[] _countries = ["Bulgaria", "Argentina", "Germany", "Norway", "Portugal", "Canada", "Spain"];
}

Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.

Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.

Alle besturingselementen · Documentatie