material ui search bar herunterladen - material ui search bar Quellcode herunterladen

material ui search bar

Anderer Quellcode

v1.0.0

Herunterladen

Materialsuchleiste

Beispiel

Sehen Sie diese Komponente in Aktion

Installation

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

Hinweis: Wenn Sie noch Material-UI v3 verwenden, installieren Sie bitte v0.x der Suchleiste mit npm i --save material-ui-search-bar@beta

Verwendung

Die SearchBar ist eine kontrollierte Eingabe , was bedeutet, dass Sie den Eingabestatus beibehalten müssen. Dies ermöglicht viel Flexibilität, z. B. können Sie die Sucheingabe ändern und löschen, indem Sie einfach ihre Requisiten ändern.

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

SearchBar-Eigenschaften

Name	Typ	Standard	Beschreibung
cancelOnEscape	`bool`		Ob die Suche bei Flucht gelöscht werden soll
Klassen*	`object`		Überschreiben oder erweitern Sie die auf die Komponente angewendeten Stile.
Klassenname	`string`	`''`	Maßgeschneiderte Spitzenklasse
closeIcon	`node`	`<ClearIcon style={{ color: grey[500] }} />`	Überschreiben Sie das Schließen-Symbol.
deaktiviert	`bool`	`false`	Deaktiviert das Textfeld.
onCancelSearch	`func`		Wird ausgelöst, wenn die Suche abgebrochen wird.
onChange	`func`		Wird ausgelöst, wenn sich der Textwert ändert.
onRequestSearch	`func`		Wird ausgelöst, wenn auf das Suchsymbol geklickt wird.
Platzhalter	`string`	`'Search'`	Legt Platzhaltertext für das eingebettete Textfeld fest.
Suchsymbol	`node`	`<SearchIcon style={{ color: grey[500] }} />`	Überschreiben Sie das Suchsymbol.
Stil	`object`	`null`	Überschreiben Sie die Inline-Stile des Stammelements.
Wert	`string`	`''`	Der Wert des Textfelds.