Zum Inhalt springen
CONTENT · FREE

Highlighter

Suchtreffer im Text markieren, damit Benutzer sie sofort finden.

Markieren Sie jedes Vorkommen eines Suchtexts in einer Zeichenfolge, ohne Beachtung der Groß- und Kleinschreibung, sofern Sie nichts anderes verlangen.

Warum es hilft

  • Markiert Treffer
  • Option für Groß-/Kleinschreibung
  • Einfach

Wo es passt

  • Suchergebnisse
  • Listen
  • Dokumentation
Das Steuerelement Highlighter auf einer RayCraft-Seite

Beispiel

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

Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.

In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.

Alle Steuerelemente ยท Dokumentation