Un campo de búsqueda que se ve y se comporta como la gente espera: un icono, un botón de borrado y tu propia acción de búsqueda al pulsar Intro.
Por qué ayuda
- Icono y botón de borrado integrados
- Búsqueda con Intro, borrado o al escribir
- Encaja en encabezados y barras de herramientas
Dónde encaja
- Búsqueda en sitio y tablas
- Filtros de listas
- Búsqueda de comandos y ayuda
Ejemplo
<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 breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.