bee-drawer
react bee-drawer component for tinper-bee
some description...
依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
使用方法
import Drawer from 'ac-drawer';
import 'ac-drawer/dist/ac-drawer.css';
<Drawer title={'basic drawer'} show={true} placement={'right'} onClose={this.fCloseDrawer}>
<div className="con">
<p>这是第一行文字</p>
<p>这是第二行文字</p>
<p>这是第三行文字，啦啦啦~</p>
</div>
</Drawer>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示抽屉组件 | string |
|
| placement | 抽屉的位置。有四个预置的选项: left,right,top,bottom
|
string |
right |
| hasHeader | 是否显示抽屉的头部 | boolean |
true |
| title | 抽屉的头部的标题 | string |
- |
| className | 抽屉容器的class, 用来自定义组件样式 | string |
|
| showMask | 是否显示遮罩 | boolean |
true |
| maskClosable | 点击遮罩是否可以关闭抽屉 | boolean |
false |
| zIndex | 抽屉容器的层级，可以修改层级 | number |
100000 |
| showClose | 是否显示关闭按钮 | boolean |
false |
| closeIcon | 自定义关闭图标 | ReactNode |
<Icon type="uf-close"/> |
| width | 抽屉的宽度 |
number string
|
- |
| height | 抽屉的高度 |
number string
|
- |
| destroyOnClose | 关闭时候是否销毁抽屉的内容 | boolean |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-drawer
$ cd bee-drawer
$ npm install
$ npm run dev
