material ui search bar
v1.0.0
Voir ce composant en action
npm i --save material-ui-search-bar Remarque : si vous utilisez toujours Material-UI v3, veuillez installer la v0.x de la barre de recherche en utilisant npm i --save material-ui-search-bar@beta
La SearchBar est une entrée contrôlée , ce qui signifie que vous devez conserver l’état de l’entrée. Cela permet une grande flexibilité, par exemple vous pouvez modifier et effacer l'entrée de recherche simplement en changeant ses accessoires.
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 ) }
/ >
) ;| Nom | Taper | Défaut | Description |
|---|---|---|---|
| annulerOnEscape | bool | S'il faut effacer la recherche en cas d'évasion | |
| cours* | object | Remplacez ou étendez les styles appliqués au composant. | |
| Nom de classe | string | '' | Classe personnalisée de niveau supérieur |
| fermerIcône | node | <ClearIcon style={{ color: grey[500] }} /> | Remplacez l'icône de fermeture. |
| désactivé | bool | false | Désactive le champ de texte. |
| surAnnulerRecherche | func | Lancé lorsque la recherche est annulée. | |
| surChange | func | Lancé lorsque la valeur du texte change. | |
| surRequêteRecherche | func | Lancé lorsque l'on clique sur l'icône de recherche. | |
| espace réservé | string | 'Search' | Définit le texte d'espace réservé pour le champ de texte incorporé. |
| icône de recherche | node | <SearchIcon style={{ color: grey[500] }} /> | Remplacez l'icône de recherche. |
| style | object | null | Remplacez les styles en ligne de l'élément racine. |
| valeur | string | '' | La valeur du champ de texte. |
* propriété requise
Toutes les autres propriétés fournies seront réparties sur le composant Input sous-jacent.
Les fichiers inclus dans ce référentiel sont sous licence MIT.
