bee-drawer
Version:
Drawer ui component for react
50 lines (31 loc) • 1.33 kB
Markdown
# 抽屉组件 Drawer
react的抽屉组件,可以从上下左右这些侧面弹出一个层,显示特定的内容
## 何时使用
例如:弹出列表中一项的信息
## 如何使用
```
import { Drawer } from 'tinper-bee';
or
import Drawer from 'bee-drawer';
import 'bee-drawer/build/Drawer.css';
```
## 代码演示
## 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` |
## 注意事项
暂无
## 更新日志