Un champ de recherche qui ressemble et se comporte comme les gens l’attendent : une icône, un bouton d’effacement et votre propre action de recherche sur Entrée.
Pourquoi c’est utile
- Icône et bouton d’effacement intégrés
- Recherche sur Entrée, effacement ou pendant la frappe
- S’intègre aux en-têtes et barres d’outils
Où il trouve sa place
- Recherche de site et de tableaux
- Filtres de listes
- Recherche de commandes et d’aide
Exemple
<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;
}Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.