• Drawer抽屉
    • 何时使用
    • 代码演示
    • API

    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)无