• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

TeamWertarbyte/material-ui-search-bar: Material design search bar

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

TeamWertarbyte/material-ui-search-bar

开源软件地址(OpenSource Url):

https://github.com/TeamWertarbyte/material-ui-search-bar

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

Material Search Bar

Example

See this component in action

Installation

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

Note: If you're still using Material-UI v3, please install v0.x of the search bar using npm i --save material-ui-search-bar@beta

Usage

The SearchBar is a controlled input, meaning that you need to keep the input state. This allows for much flexibility, e.g. you can change and clear the search input just by changing its props.

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 Properties

Name Type Default Description
cancelOnEscape bool Whether to clear search on escape
classes* object Override or extend the styles applied to the component.
className string '' Custom top-level class
closeIcon node <ClearIcon style={{ color: grey[500] }} /> Override the close icon.
disabled bool false Disables text field.
onCancelSearch func Fired when the search is cancelled.
onChange func Fired when the text value changes.
onRequestSearch func Fired when the search icon is clicked.
placeholder string 'Search' Sets placeholder text for the embedded text field.
searchIcon node <SearchIcon style={{ color: grey[500] }} /> Override the search icon.
style object null Override the inline-styles of the root element.
value string '' The value of the text field.

* required property

Any other properties supplied will be spread to the underlying Input component.

License

The files included in this repository are licensed under the MIT license.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap