--- title: Drawer - 抽屉 nav: title: 组件 path: /client group: order: 3 title: 其他 path: /client/others --- # Drawer - 抽屉 通过 `Drawer.open(props)` 方法打开抽屉,无需预渲染,可在触发事件中使用。 ### 基础抽屉 ```tsx /** * title: 基础抽屉 */ import React from 'react'; import { Button } from 'antd'; import Drawer from './index.tsx'; export default () => ( ); ``` ### 多层抽屉 ```tsx /** * title: 多层抽屉 * desc: 有多少层就执行多少个 `Drawer.open(props)` */ import React from 'react'; import { Button } from 'antd'; import Drawer from './index.tsx'; export default () => ( ) }, }); }}>Open drawer ); ``` ### 关闭时提示 ```tsx /** * title: 关闭时提示 * desc: 通过 `closeWithConfirm(props)` 方法触发,更多参数请参考 `Modal.confirm` */ import React from 'react'; import { Button } from 'antd'; import Drawer from './index.tsx'; export default () => ( ); ```