material ui search bar

Панель поиска материалов

Посмотрите этот компонент в действии

Установка

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

Примечание. Если вы все еще используете Material-UI v3, установите версию 0.x панели поиска, используя npm i --save material-ui-search-bar@beta

Использование

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

Свойства панели поиска

Имя	Тип	По умолчанию	Описание
отменитьOnEscape	bool		Очистить ли поиск при побеге
занятия*	object		Переопределить или расширить стили, примененные к компоненту.
имя класса	string	''	Пользовательский класс верхнего уровня
закрытьЗначок	node	<ClearIcon style={{ color: grey[500] }} />	Переопределить значок закрытия.
неполноценный	bool	false	Отключает текстовое поле.
onCancelSearch	func		Вызывается при отмене поиска.
onChange	func		Вызывается при изменении текстового значения.
onRequestSearch	func		Запускается при нажатии значка поиска.
заполнитель	string	'Search'	Устанавливает текст-заполнитель для встроенного текстового поля.
значок поиска	node	<SearchIcon style={{ color: grey[500] }} />	Переопределить значок поиска.
стиль	object	null	Переопределить встроенные стили корневого элемента.
ценить	string	''	Значение текстового поля.

* необходимое имущество

Любые другие предоставленные свойства будут распространены на базовый компонент Input .

Лицензия

Файлы, включенные в этот репозиторий, лицензируются по лицензии MIT.