0.0.7 • Published 4 years ago
bee-drawer v0.0.7
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