---
name: Drawer 抽屉
route: /drawer
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  Drawer  from '../components/drawer'
import Demo from './components/drawer'


# Drawer 抽屉
>提示: 展开代码编辑器可以在线编辑，实时生效


## 基础用法

<Demo/>

```typescript jsx
const Demo = function(props: IProps) {
    const [visible, setV] = useState(false);
    const [visible1, setV1] = useState(false);
    const [visible2, setV2] = useState(false);
    const [visible3, setV3] = useState(false);
    return (
        <div>
            <Button onClick={() => setV(true)} style={{ margin: 10 }}>
                Right
            </Button>
            <Button onClick={() => setV1(true)} style={{ margin: 10 }}>
                Left
            </Button>
            <Button onClick={() => setV2(true)} style={{ margin: 10 }}>
                Top
            </Button>
            <Button onClick={() => setV3(true)} style={{ margin: 10 }}>
                Bottom
            </Button>
            <Drawer visible={visible} onOk={() => setV(false)} onCancel={() => setV(false)}>
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer visible={visible1} onOk={() => setV1(false)} onCancel={() => setV1(false)} placement="left">
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer visible={visible2} onOk={() => setV2(false)} onCancel={() => setV2(false)} placement="top">
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer visible={visible3} onOk={() => setV3(false)} onCancel={() => setV3(false)} placement="bottom">
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
        </div>
    );
};
```

## API


<Props of={Drawer} />