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