Ett sökfält som ser ut och beter sig som folk förväntar sig: en ikon, en rensningsknapp och din egen sökåtgärd när de trycker Enter.
Varför det hjälper
- Ikon och rensningsknapp inbyggda
- Sökning vid Enter, rensa eller medan man skriver
- Passar i sidhuvuden och verktygsfält
Var det passar
- Sök på webbplats och i tabeller
- Filter på listor
- Sök efter kommandon och hjälp
Exempel
<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;
}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.