react bee-search-panel component for tinper-bee
折叠查询条件
使用方法
import SearchPanel from 'bee-search-panel';
class SearchPanelDemo extends Component {
render() {
return (
<SearchPanel/>
)
}
}
样式引入
- 可以使用link引入build目录下SearchPanel.css
<link rel="stylesheet" href="./node_modules/bee-search-panel/build/SearchPanel.css">
- 可以在js中import样式
import "./node_modules/bee-search-panel/src/SearchPanel.scss"
//或是
import "./node_modules/bee-search-panel/build/SearchPanel.css"API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isExpandedBtn | 是否显示展开按钮 | boolean | true |
| defaultExpanded | 展开和收起的默认状态 | boolean | false |
| expanded | 是否默认展开 | boolean | false |
| onSearch | 点击查询的回调 | function | - |
| onReset | 点击查询的回调 | function | - |
| title | 查询面板标题 | string | '默认筛选' |
| onPanelChangeStart | 显示或隐藏开始回调 | function | - |
| onPanelChangeIng | 显示或隐藏进行中回调 | function | - |
| onPanelChangeEnd | 显示或隐藏结束回调 | function | - |
| onChange | 点击显示或隐藏回调 | function | - |
| showOperation | 是否显示 查询，清空操作按钮 | bool | - |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-search-panel
$ cd bee-search-panel
$ npm install
$ npm run dev
