Een zoekveld dat eruitziet en zich gedraagt zoals mensen verwachten: een pictogram, een wisknop en je eigen zoekactie wanneer ze op Enter drukken.
Waarom het helpt
- Pictogram en wisknop ingebouwd
- Zoeken bij Enter, wissen of tijdens het typen
- Past in koppen en werkbalken
Waar het past
- Zoeken in site en tabellen
- Filters op lijsten
- Zoeken naar opdrachten en hulp
Voorbeeld
<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;
}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.