@uiw/react-drawer

Drawer 抽屉
===


一个从页面边缘滑动出来的浮层，可以替代 更多样的展示方式。

``jsx
import { Drawer } from 'uiw';
// or
import Drawer from '@uiw/react-drawer';
`

$3

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Drawer, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
constructor() {
super();
this.state = {
visible: false,
}
}
onClick() {
this.setState({ visible: !this.state.visible });
}
onClose() {
this.setState({ visible: false });
}
render() {
return (


export default Demo;
`

$3

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Drawer, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
constructor() {
super();
this.state = {
visible: false,
placement: null,
}
}
onClick(placement) {
this.setState({ visible: !this.state.visible, placement });
}
onClose() {
this.setState({ visible: false });
}
render() {
return (


export default Demo;
`

$3

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Drawer, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
constructor() {
super();
this.state = {
visible: false,
}
}
onClick() {
this.setState({ visible: !this.state.visible });
}
onClose() {
this.setState({ visible: false });
}
render() {
return (


export default Demo;
`

Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| title | 抽屉标题 | String | - |
| icon | 设置对话框右上角图标 | String/Element | - |
| isOpen | 是否可见 | Boollean | - |
| closable | 是否显示右上角的关闭按钮 | Boollean | true |
| placement | 抽屉的方向 | Enum{top, right, bottom, left} | right |
| size | 高度/宽度，在 placement 为 top 或 bottom 时使用为设置高度，否则设置宽度 | Number | - |
| bodyProps | 抽屉填充内容的参数样式对象，例如className,style`等 | Object | - |

更多属性文档请参考 Overlay。