material ui search bar

Barra de pesquisa de materiais

Veja este componente em ação

Instalação

npm i --save material-ui-search-bar

Observação: se você ainda estiver usando o Material-UI v3, instale a v0.x da barra de pesquisa usando npm i --save material-ui-search-bar@beta

Uso

O SearchBar é uma entrada controlada , o que significa que você precisa manter o estado da entrada. Isto permite muita flexibilidade, por exemplo, você pode alterar e limpar a entrada de pesquisa apenas alterando seus adereços.

 import SearchBar from "material-ui-search-bar" ;
// *snip*

return (
  < SearchBar
    value = { this . state . value }
    onChange = { ( newValue ) => this . setState ( { value : newValue } ) }
    onRequestSearch = { ( ) => doSomethingWith ( this . state . value ) }
  / >
) ;

Propriedades da barra de pesquisa

Nome	Tipo	Padrão	Descrição
cancelarOnEscape	bool		Se deve limpar a pesquisa ao escapar
aulas*	object		Substitua ou estenda os estilos aplicados ao componente.
nomedaclasse	string	''	Classe personalizada de nível superior
fecharIcon	node	<ClearIcon style={{ color: grey[500] }} />	Substitua o ícone Fechar.
desabilitado	bool	false	Desativa o campo de texto.
onCancelSearch	func		Disparado quando a pesquisa é cancelada.
onChange	func		Disparado quando o valor do texto é alterado.
onRequestSearch	func		Disparado quando o ícone de pesquisa é clicado.
espaço reservado	string	'Search'	Define o texto do espaço reservado para o campo de texto incorporado.
ícone de pesquisa	node	<SearchIcon style={{ color: grey[500] }} />	Substitua o ícone de pesquisa.
estilo	object	null	Substitua os estilos embutidos do elemento raiz.
valor	string	''	O valor do campo de texto.

*propriedade necessária

Quaisquer outras propriedades fornecidas serão espalhadas para o componente Input subjacente.

Licença

Os arquivos incluídos neste repositório estão licenciados sob a licença MIT.