material ui search bar

マテリアル検索バー

このコンポーネントの動作を確認してください

インストール

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

注: まだマテリアル UI v3 を使用している場合は、 npm i --save material-ui-search-bar@betaを使用して検索バーの v0.x をインストールしてください。

使用法

SearchBar制御された入力です。つまり、入力状態を維持する必要があります。これにより、柔軟性が大幅に向上します。たとえば、プロパティを変更するだけで検索入力を変更およびクリアできます。

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

検索バーのプロパティ

名前	タイプ	デフォルト	説明
cancelOnEscape	bool		逃走時の探索をクリアするかどうか
クラス*	object		コンポーネントに適用されたスタイルをオーバーライドまたは拡張します。
クラス名	string	''	カスタムの最上位クラス
閉じるアイコン	node	<ClearIcon style={{ color: grey[500] }} />	閉じるアイコンをオーバーライドします。
無効	bool	false	テキストフィールドを無効にします。
onキャンセル検索	func		検索がキャンセルされたときに発生します。
onChange	func		テキスト値が変更されると発生します。
onRequestSearch	func		検索アイコンがクリックされたときに発生します。
プレースホルダー	string	'Search'	埋め込みテキストフィールドのプレースホルダーテキストを設定します。
検索アイコン	node	<SearchIcon style={{ color: grey[500] }} />	検索アイコンをオーバーライドします。
スタイル	object	null	ルート要素のインラインスタイルをオーバーライドします。
価値	string	''	テキストフィールドの値。

* 必須のプロパティ

指定されたその他のプロパティは、基礎となるInputコンポーネントに広がります。

ライセンス

このリポジトリに含まれるファイルは、MIT ライセンスに基づいてライセンスされています。