SearchInput
Padrão
Com atalho
Alimentando uma tabela
| Número | Cliente |
|---|---|
| 4813 | Clínica São Lucas |
| 4814 | Transportes Cabo Branco |
| 4815 | Ótica Central |
import { SearchInput } from '@rivocode/ui'Quando usar
O campo de busca com a lupa no lugar: o arranjo que toda listagem montava na
mão com position: absolute.
Sai como <input type="search">, então o leitor de tela anuncia "busca" e o
Esc limpa: o campo não controlado sozinho, o controlado pelo onClear.
shortcut mostra o atalho num Kbd dentro do campo ("mod+k" sai ⌘K no Mac
e Ctrl K no resto). Só o desenho: registrar o atalho é trabalho de quem monta
a tela, porque é ela que sabe o que mais escuta teclado.
Combina com o filter do DataTable: o campo fica onde a tela pedir e a
tabela só recebe o texto.
No React Native
Traduz: o @rivocode/ui-native exporta SearchInput - value e onValueChange obrigatórios. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
onClear0.4.0Chamado no Esc. | (() => void) |
shortcut0.4.0O atalho que abre ou foca a busca, mostrado num `Kbd` dentro do campo: `"mod+k"`. | string |
sizeA altura do campo. | "lg""md""sm" |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.