material ui search bar

材料搜尋欄

查看該組件的實際效果

安裝

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

注意：如果您仍在使用 Material-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 ) }
  / >
) ;

搜尋欄屬性

姓名	類型	預設	描述
取消逃生	bool		越獄時是否清除搜索
課程*	object		覆蓋或擴充套用於元件的樣式。
類別名	string	''	自訂頂級類
關閉圖示	node	<ClearIcon style={{ color: grey[500] }} />	覆蓋關閉圖示。
殘障人士	bool	false	禁用文字欄位。
取消搜尋	func		取消搜尋時觸發。
改變時	func		當文字值更改時觸發。
請求搜尋	func		點擊搜尋圖示時觸發。
佔位符	string	'Search'	設定嵌入文字欄位的佔位符文字。
搜尋圖示	node	<SearchIcon style={{ color: grey[500] }} />	覆蓋搜尋圖示。
風格	object	null	覆蓋根元素的內聯樣式。
價值	string	''	文字欄位的值。

* 必填屬性

提供的任何其他屬性都會傳播到底層Input組件。

執照

此儲存庫中包含的文件已根據 MIT 許可證獲得許可。