Um campo de busca que tem a aparência e o comportamento que as pessoas esperam: um ícone, um botão de limpar e sua própria ação de busca ao pressionar Enter.
Por que ajuda
- Ícone e botão de limpar embutidos
- Busca ao pressionar Enter, ao limpar ou enquanto digita
- Combina com cabeçalhos e barras de ferramentas
Onde se encaixa
- Busca em site e tabelas
- Filtros de listas
- Busca de comandos e ajuda
Exemplo
<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;
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.