Drawer抽屉

屏幕边缘滑出的浮层面板。

何时使用

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

  • 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。

  • 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

代码演示

Drawer抽屉 - 图1

基础抽屉

基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭

TypeScript

JavaScript

Drawer抽屉 - 图2

  1. import React, { useState } from 'react';
  2. import { Drawer, Button } from 'antd';
  4. const App: React.FC = () => {
  5.   const [visible, setVisible] = useState(false);
  6.   const showDrawer = () => {
  7.     setVisible(true);
  8.   };
  9.   const onClose = () => {
  10.     setVisible(false);
  11.   };
  12.   return (
  13.     <>
  14.       <Button type="primary" onClick={showDrawer}>
  15.         Open
  16.       </Button>
  17.       <Drawer
  18.         title="Basic Drawer"
  19.         placement="right"
  20.         closable={false}
  21.         onClose={onClose}
  22.         visible={visible}
  23.       >
  24.         <p>Some contents...</p>
  25.         <p>Some contents...</p>
  26.         <p>Some contents...</p>
  27.       </Drawer>
  28.     </>
  29.   );
  30. };
  32. ReactDOM.render(<App />, mountNode);

Drawer抽屉 - 图3

渲染在当前 DOM

渲染在当前 dom 里。自定义容器，查看 getContainer。

  1. import { Drawer, Button } from 'antd';
  3. class App extends React.Component {
  4.   state = { visible: false };
  6.   showDrawer = () => {
  7.     this.setState({
  8.       visible: true,
  9.     });
  10.   };
  12.   onClose = () => {
  13.     this.setState({
  14.       visible: false,
  15.     });
  16.   };
  18.   render() {
  19.     return (
  20.       <div className="site-drawer-render-in-current-wrapper">
  21.         Render in this
  22.         <div style={{ marginTop: 16 }}>
  23.           <Button type="primary" onClick={this.showDrawer}>
  24.             Open
  25.           </Button>
  26.         </div>
  27.         <Drawer
  28.           title="Basic Drawer"
  29.           placement="right"
  30.           closable={false}
  31.           onClose={this.onClose}
  32.           visible={this.state.visible}
  33.           getContainer={false}
  34.           style={{ position: 'absolute' }}
  35.         >
  36.           <p>Some contents...</p>
  37.         </Drawer>
  38.       </div>
  39.     );
  40.   }
  41. }
  43. ReactDOM.render(<App />, mountNode);
  1. .site-drawer-render-in-current-wrapper {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 48px;
  5.   overflow: hidden;
  6.   text-align: center;
  7.   background: #fafafa;
  8.   border: 1px solid #ebedf0;
  9.   border-radius: 2px;
  10. }

Drawer抽屉 - 图4

信息预览抽屉

需要快速预览对象概要时使用，点击遮罩区关闭。

  1. import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
  3. const DescriptionItem = ({ title, content }) => (
  4.   <div className="site-description-item-profile-wrapper">
  5.     <p className="site-description-item-profile-p-label">{title}:</p>
  6.     {content}
  7.   </div>
  8. );
  10. class App extends React.Component {
  11.   state = { visible: false };
  13.   showDrawer = () => {
  14.     this.setState({
  15.       visible: true,
  16.     });
  17.   };
  19.   onClose = () => {
  20.     this.setState({
  21.       visible: false,
  22.     });
  23.   };
  25.   render() {
  26.     return (
  27.       <>
  28.         <List
  29.           dataSource={[
  30.             {
  31.               name: 'Lily',
  32.             },
  33.             {
  34.               name: 'Lily',
  35.             },
  36.           ]}
  37.           bordered
  38.           renderItem={item => (
  39.             <List.Item
  40.               key={item.id}
  41.               actions={[
  42.                 <a onClick={this.showDrawer} key={`a-${item.id}`}>
  43.                   View Profile
  44.                 </a>,
  45.               ]}
  46.             >
  47.               <List.Item.Meta
  48.                 avatar={
  49.                   <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
  50.                 }
  51.                 title={<a href="https://ant.design/index-cn">{item.name}</a>}
  52.                 description="Progresser XTech"
  53.               />
  54.             </List.Item>
  55.           )}
  56.         />
  57.         <Drawer
  58.           width={640}
  59.           placement="right"
  60.           closable={false}
  61.           onClose={this.onClose}
  62.           visible={this.state.visible}
  63.         >
  64.           <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
  65.             User Profile
  66.           </p>
  67.           <p className="site-description-item-profile-p">Personal</p>
  68.           <Row>
  69.             <Col span={12}>
  70.               <DescriptionItem title="Full Name" content="Lily" />
  71.             </Col>
  72.             <Col span={12}>
  73.               <DescriptionItem title="Account" content="AntDesign@example.com" />
  74.             </Col>
  75.           </Row>
  76.           <Row>
  77.             <Col span={12}>
  78.               <DescriptionItem title="City" content="HangZhou" />
  79.             </Col>
  80.             <Col span={12}>
  81.               <DescriptionItem title="Country" content="China🇨🇳" />
  82.             </Col>
  83.           </Row>
  84.           <Row>
  85.             <Col span={12}>
  86.               <DescriptionItem title="Birthday" content="February 2,1900" />
  87.             </Col>
  88.             <Col span={12}>
  89.               <DescriptionItem title="Website" content="-" />
  90.             </Col>
  91.           </Row>
  92.           <Row>
  93.             <Col span={24}>
  94.               <DescriptionItem
  95.                 title="Message"
  96.                 content="Make things as simple as possible but no simpler."
  97.               />
  98.             </Col>
  99.           </Row>
  100.           <Divider />
  101.           <p className="site-description-item-profile-p">Company</p>
  102.           <Row>
  103.             <Col span={12}>
  104.               <DescriptionItem title="Position" content="Programmer" />
  105.             </Col>
  106.             <Col span={12}>
  107.               <DescriptionItem title="Responsibilities" content="Coding" />
  108.             </Col>
  109.           </Row>
  110.           <Row>
  111.             <Col span={12}>
  112.               <DescriptionItem title="Department" content="XTech" />
  113.             </Col>
  114.             <Col span={12}>
  115.               <DescriptionItem title="Supervisor" content={<a>Lin</a>} />
  116.             </Col>
  117.           </Row>
  118.           <Row>
  119.             <Col span={24}>
  120.               <DescriptionItem
  121.                 title="Skills"
  122.                 content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
  123.               />
  124.             </Col>
  125.           </Row>
  126.           <Divider />
  127.           <p className="site-description-item-profile-p">Contacts</p>
  128.           <Row>
  129.             <Col span={12}>
  130.               <DescriptionItem title="Email" content="AntDesign@example.com" />
  131.             </Col>
  132.             <Col span={12}>
  133.               <DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
  134.             </Col>
  135.           </Row>
  136.           <Row>
  137.             <Col span={24}>
  138.               <DescriptionItem
  139.                 title="Github"
  140.                 content={
  141.                   <a href="http://github.com/ant-design/ant-design/">
  142.                     github.com/ant-design/ant-design/
  143.                   </a>
  144.                 }
  145.               />
  146.             </Col>
  147.           </Row>
  148.         </Drawer>
  149.       </>
  150.     );
  151.   }
  152. }
  154. ReactDOM.render(<App />, mountNode);
  1. .site-description-item-profile-wrapper {
  2.   margin-bottom: 7px;
  3.   color: rgba(0, 0, 0, 0.65);
  4.   font-size: 14px;
  5.   line-height: 1.5715;
  6. }
  8. [data-theme='compact'] .site-description-item-profile-wrapper {
  9.   font-size: 12px;
  10.   line-height: 1.66667;
  11. }
  13. .ant-drawer-body p.site-description-item-profile-p {
  14.   display: block;
  15.   margin-bottom: 16px;
  16.   color: rgba(0, 0, 0, 0.85);
  17.   font-size: 16px;
  18.   line-height: 1.5715;
  19. }
  21. [data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
  22.   font-size: 14px;
  23.   line-height: 1.66667;
  24. }
  26. .site-description-item-profile-p-label {
  27.   display: inline-block;
  28.   margin-right: 8px;
  29.   color: rgba(0, 0, 0, 0.85);
  30. }

Drawer抽屉 - 图5

自定义位置

自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭

  1. import { Drawer, Button, Radio, Space } from 'antd';
  3. class App extends React.Component {
  4.   state = { visible: false, placement: 'left' };
  6.   showDrawer = () => {
  7.     this.setState({
  8.       visible: true,
  9.     });
  10.   };
  12.   onClose = () => {
  13.     this.setState({
  14.       visible: false,
  15.     });
  16.   };
  18.   onChange = e => {
  19.     this.setState({
  20.       placement: e.target.value,
  21.     });
  22.   };
  24.   render() {
  25.     const { placement, visible } = this.state;
  26.     return (
  27.       <>
  28.         <Space>
  29.           <Radio.Group defaultValue={placement} onChange={this.onChange}>
  30.             <Radio value="top">top</Radio>
  31.             <Radio value="right">right</Radio>
  32.             <Radio value="bottom">bottom</Radio>
  33.             <Radio value="left">left</Radio>
  34.           </Radio.Group>
  35.           <Button type="primary" onClick={this.showDrawer}>
  36.             Open
  37.           </Button>
  38.         </Space>
  39.         <Drawer
  40.           title="Basic Drawer"
  41.           placement={placement}
  42.           closable={false}
  43.           onClose={this.onClose}
  44.           visible={visible}
  45.           key={placement}
  46.         >
  47.           <p>Some contents...</p>
  48.           <p>Some contents...</p>
  49.           <p>Some contents...</p>
  50.         </Drawer>
  51.       </>
  52.     );
  53.   }
  54. }
  56. ReactDOM.render(<App />, mountNode);

Drawer抽屉 - 图6

抽屉表单

在抽屉中使用表单。

  1. import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
  2. import { PlusOutlined } from '@ant-design/icons';
  4. const { Option } = Select;
  6. class DrawerForm extends React.Component {
  7.   state = { visible: false };
  9.   showDrawer = () => {
  10.     this.setState({
  11.       visible: true,
  12.     });
  13.   };
  15.   onClose = () => {
  16.     this.setState({
  17.       visible: false,
  18.     });
  19.   };
  21.   render() {
  22.     return (
  23.       <>
  24.         <Button type="primary" onClick={this.showDrawer}>
  25.           <PlusOutlined /> New account
  26.         </Button>
  27.         <Drawer
  28.           title="Create a new account"
  29.           width={720}
  30.           onClose={this.onClose}
  31.           visible={this.state.visible}
  32.           bodyStyle={{ paddingBottom: 80 }}
  33.           footer={
  34.             <div
  35.               style={{
  36.                 textAlign: 'right',
  37.               }}
  38.             >
  39.               <Button onClick={this.onClose} style={{ marginRight: 8 }}>
  40.                 Cancel
  41.               </Button>
  42.               <Button onClick={this.onClose} type="primary">
  43.                 Submit
  44.               </Button>
  45.             </div>
  46.           }
  47.         >
  48.           <Form layout="vertical" hideRequiredMark>
  49.             <Row gutter={16}>
  50.               <Col span={12}>
  51.                 <Form.Item
  52.                   name="name"
  53.                   label="Name"
  54.                   rules={[{ required: true, message: 'Please enter user name' }]}
  55.                 >
  56.                   <Input placeholder="Please enter user name" />
  57.                 </Form.Item>
  58.               </Col>
  59.               <Col span={12}>
  60.                 <Form.Item
  61.                   name="url"
  62.                   label="Url"
  63.                   rules={[{ required: true, message: 'Please enter url' }]}
  64.                 >
  65.                   <Input
  66.                     style={{ width: '100%' }}
  67.                     addonBefore="http://"
  68.                     addonAfter=".com"
  69.                     placeholder="Please enter url"
  70.                   />
  71.                 </Form.Item>
  72.               </Col>
  73.             </Row>
  74.             <Row gutter={16}>
  75.               <Col span={12}>
  76.                 <Form.Item
  77.                   name="owner"
  78.                   label="Owner"
  79.                   rules={[{ required: true, message: 'Please select an owner' }]}
  80.                 >
  81.                   <Select placeholder="Please select an owner">
  82.                     <Option value="xiao">Xiaoxiao Fu</Option>
  83.                     <Option value="mao">Maomao Zhou</Option>
  84.                   </Select>
  85.                 </Form.Item>
  86.               </Col>
  87.               <Col span={12}>
  88.                 <Form.Item
  89.                   name="type"
  90.                   label="Type"
  91.                   rules={[{ required: true, message: 'Please choose the type' }]}
  92.                 >
  93.                   <Select placeholder="Please choose the type">
  94.                     <Option value="private">Private</Option>
  95.                     <Option value="public">Public</Option>
  96.                   </Select>
  97.                 </Form.Item>
  98.               </Col>
  99.             </Row>
  100.             <Row gutter={16}>
  101.               <Col span={12}>
  102.                 <Form.Item
  103.                   name="approver"
  104.                   label="Approver"
  105.                   rules={[{ required: true, message: 'Please choose the approver' }]}
  106.                 >
  107.                   <Select placeholder="Please choose the approver">
  108.                     <Option value="jack">Jack Ma</Option>
  109.                     <Option value="tom">Tom Liu</Option>
  110.                   </Select>
  111.                 </Form.Item>
  112.               </Col>
  113.               <Col span={12}>
  114.                 <Form.Item
  115.                   name="dateTime"
  116.                   label="DateTime"
  117.                   rules={[{ required: true, message: 'Please choose the dateTime' }]}
  118.                 >
  119.                   <DatePicker.RangePicker
  120.                     style={{ width: '100%' }}
  121.                     getPopupContainer={trigger => trigger.parentElement}
  122.                   />
  123.                 </Form.Item>
  124.               </Col>
  125.             </Row>
  126.             <Row gutter={16}>
  127.               <Col span={24}>
  128.                 <Form.Item
  129.                   name="description"
  130.                   label="Description"
  131.                   rules={[
  132.                     {
  133.                       required: true,
  134.                       message: 'please enter url description',
  135.                     },
  136.                   ]}
  137.                 >
  138.                   <Input.TextArea rows={4} placeholder="please enter url description" />
  139.                 </Form.Item>
  140.               </Col>
  141.             </Row>
  142.           </Form>
  143.         </Drawer>
  144.       </>
  145.     );
  146.   }
  147. }
  149. ReactDOM.render(<DrawerForm />, mountNode);
  1. .site-form-in-drawer-wrapper {
  2.   position: absolute;
  3.   right: 0px;
  4.   bottom: 0px;
  5.   width: 100%;
  6.   padding: 10px 16px;
  7.   border-top: 1px solid #e9e9e9;
  8.   background: #fff;
  9.   text-align: right;
  10. }

Drawer抽屉 - 图7

多层抽屉

在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。

  1. import { Drawer, Button } from 'antd';
  3. class App extends React.Component {
  4.   state = { visible: false, childrenDrawer: false };
  6.   showDrawer = () => {
  7.     this.setState({
  8.       visible: true,
  9.     });
  10.   };
  12.   onClose = () => {
  13.     this.setState({
  14.       visible: false,
  15.     });
  16.   };
  18.   showChildrenDrawer = () => {
  19.     this.setState({
  20.       childrenDrawer: true,
  21.     });
  22.   };
  24.   onChildrenDrawerClose = () => {
  25.     this.setState({
  26.       childrenDrawer: false,
  27.     });
  28.   };
  30.   render() {
  31.     return (
  32.       <>
  33.         <Button type="primary" onClick={this.showDrawer}>
  34.           Open drawer
  35.         </Button>
  36.         <Drawer
  37.           title="Multi-level drawer"
  38.           width={520}
  39.           closable={false}
  40.           onClose={this.onClose}
  41.           visible={this.state.visible}
  42.         >
  43.           <Button type="primary" onClick={this.showChildrenDrawer}>
  44.             Two-level drawer
  45.           </Button>
  46.           <Drawer
  47.             title="Two-level Drawer"
  48.             width={320}
  49.             closable={false}
  50.             onClose={this.onChildrenDrawerClose}
  51.             visible={this.state.childrenDrawer}
  52.           >
  53.             This is two-level drawer
  54.           </Drawer>
  55.         </Drawer>
  56.       </>
  57.     );
  58.   }
  59. }
  61. ReactDOM.render(<App />, mountNode);

API

参数说明类型默认值版本
afterVisibleChange切换抽屉时动画结束后的回调function(visible)-
bodyStyle可用于设置 Drawer 内容部分的样式CSSProperties-
className对话框外层容器的类名string-
closable是否显示右上角的关闭按钮booleantrue
closeIcon自定义关闭图标ReactNode<CloseOutlined />
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
drawerStyle用于设置 Drawer 弹出层的样式CSSProperties-
footer抽屉的页脚ReactNode-
footerStyle抽屉页脚部件的样式CSSProperties-
forceRender预渲染 Drawer 内元素booleanfalse
getContainer指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 domHTMLElement | () => HTMLElement | Selectors | falsebody
headerStyle用于设置 Drawer 头部的样式CSSProperties-
height高度, 在 placement 为 top 或 bottom 时使用string | number256
keyboard是否支持键盘 esc 关闭booleantrue
mask是否展示遮罩booleantrue
maskClosable点击蒙层是否允许关闭booleantrue
maskStyle遮罩样式CSSProperties{}
placement抽屉的方向top | right | bottom | leftright
push用于设置多层 Drawer 的推动行为boolean | { distance: string | number }{ distance: 180 }4.5.0+
style可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 maskCSSProperties-
title标题ReactNode-
visibleDrawer 是否可见boolean-
width宽度string | number256
zIndex设置 Drawer 的 z-indexnumber1000
onClose点击遮罩层或右上角叉或取消按钮的回调function(e)-