Hoppa till innehållet
CONTENT · FREE

Highlighter

Markera sökträffar i text så att användare hittar dem direkt.

Markera varje förekomst av en söktext i en sträng, utan hänsyn till versaler om du inte ber om annat.

Varför det hjälper

  • Markerar träffar
  • Alternativ för versaler
  • Enkel

Var det passar

  • Sökresultat
  • Listor
  • Dokumentation
Kontrollen Highlighter på en RayCraft-sida

Exempel

<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"];
}

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.

Alla kontroller ยท Dokumentation