material ui search bar

Barra de búsqueda de materiales

Vea este componente en acción

Instalación

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

Nota: Si todavía usa Material-UI v3, instale v0.x de la barra de búsqueda usando npm i --save material-ui-search-bar@beta

Uso

SearchBar es una entrada controlada , lo que significa que debe mantener el estado de entrada. Esto permite mucha flexibilidad, por ejemplo, puede cambiar y borrar la entrada de búsqueda simplemente cambiando sus accesorios.

 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 ) }
  / >
) ;

Propiedades de la barra de búsqueda

Nombre	Tipo	Por defecto	Descripción
cancelarOnEscape	bool		Si se debe borrar la búsqueda al escapar
clases*	object		Anule o extienda los estilos aplicados al componente.
nombre de clase	string	''	Clase personalizada de nivel superior
cerrarIcono	node	<ClearIcon style={{ color: grey[500] }} />	Anula el icono de cerrar.
desactivado	bool	false	Desactiva el campo de texto.
onCancelarBuscar	func		Se dispara cuando se cancela la búsqueda.
en cambio	func		Se dispara cuando cambia el valor del texto.
onRequestBuscar	func		Se activa cuando se hace clic en el icono de búsqueda.
marcador de posición	string	'Search'	Establece texto de marcador de posición para el campo de texto incrustado.
icono de búsqueda	node	<SearchIcon style={{ color: grey[500] }} />	Anula el icono de búsqueda.
estilo	object	null	Anula los estilos en línea del elemento raíz.
valor	string	''	El valor del campo de texto.

* propiedad requerida

Cualquier otra propiedad proporcionada se extenderá al componente Input subyacente.

Licencia

Los archivos incluidos en este repositorio tienen la licencia MIT.