Drawer抽屉

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

何时使用

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

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

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

代码演示

Drawer抽屉 - 图1

基础抽屉

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

  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>
  21.         <Button type="primary" onClick={this.showDrawer}>
  22.           Open
  23.         </Button>
  24.         <Drawer
  25.           title="Basic Drawer"
  26.           placement="right"
  27.           closable={false}
  28.           onClose={this.onClose}
  29.           visible={this.state.visible}
  30.         >
  31.           <p>Some contents...</p>
  32.           <p>Some contents...</p>
  33.           <p>Some contents...</p>
  34.         </Drawer>
  35.       </div>
  36.     );
  37.   }
  38. }
  40. ReactDOM.render(<App />, mountNode);

Drawer抽屉 - 图2

抽屉表单

在抽屉中使用表单。

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

Drawer抽屉 - 图3

多层抽屉

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

  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.       <div>
  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.           <div
  56.             style={{
  57.               position: 'absolute',
  58.               bottom: 0,
  59.               width: '100%',
  60.               borderTop: '1px solid #e8e8e8',
  61.               padding: '10px 16px',
  62.               textAlign: 'right',
  63.               left: 0,
  64.               background: '#fff',
  65.               borderRadius: '0 0 4px 4px',
  66.             }}
  67.           >
  68.             <Button
  69.               style={{
  70.                 marginRight: 8,
  71.               }}
  72.               onClick={this.onClose}
  73.             >
  74.               Cancel
  75.             </Button>
  76.             <Button onClick={this.onClose} type="primary">
  77.               Submit
  78.             </Button>
  79.           </div>
  80.         </Drawer>
  81.       </div>
  82.     );
  83.   }
  84. }
  86. ReactDOM.render(<App />, mountNode);

Drawer抽屉 - 图4

自定义位置

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

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

Drawer抽屉 - 图5

信息预览抽屉

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

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

API

参数说明类型默认值
closable是否显示右上角的关闭按钮booleantrue
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
getContainer指定 Drawer 挂载的 HTML 节点HTMLElement | () => HTMLElement | Selectors'body'
maskClosable点击蒙层是否允许关闭booleantrue
mask是否展示遮罩Booleantrue
maskStyle遮罩样式object{}
style可用于设置 Drawer 最外层容器的样式object-
bodyStyle可用于设置 Drawer 的样式，调整浮层位置等object-
title标题string | ReactNode-
visibleDrawer 是否可见boolean-
width宽度string | number256
height高度, 在 placement 为 top 或 bottom 时使用string | number256
className对话框外层容器的类名string-
zIndex设置 Drawer 的 z-indexNumber1000
placement抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
onClose点击遮罩层或右上角叉或取消按钮的回调function(e)无
afterVisibleChange切换抽屉时动画结束后的回调function(visible)无
keyboard是否支持键盘 esc 关闭booleantrue