Ein Suchfeld, das aussieht und sich verhält, wie Menschen es erwarten: ein Symbol, eine Löschen-Schaltfläche und Ihre eigene Suchaktion bei Enter.
Warum es hilft
- Symbol und Löschen-Schaltfläche eingebaut
- Suche bei Enter, Löschen oder während des Tippens
- Passt in Kopfbereiche und Symbolleisten
Wo es passt
- Website- und Tabellensuche
- Filter für Listen
- Befehls- und Hilfesuche
Beispiel
<SearchBox @bind-Value="_query" Label="Search (Enter to run)" Placeholder="Type and press Enter" OnSearch="OnSearch" />
<SearchBox @bind-Value="_live" Label="Search as you type" Placeholder="Filter" SearchOnInput="true" OnSearch="@(q => _hits++)" />
<span>Last search: @(_last ?? "none"), live events: @_hits</span>
@code {
private string? _query;
private string? _live;
private string? _last;
private int _hits;
private void OnSearch(string? query) => _last = query;
}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.