Drawer抽屉
屏幕边缘滑出的浮层面板。
何时使用#
抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。
当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。
当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。
代码演示
TypeScript
JavaScript
import { Button, Drawer } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer title="Basic Drawer" placement="right" onClose={onClose} visible={visible}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;
TypeScript
JavaScript
import { Button, Drawer, Radio, Space } from 'infrad';
import type { DrawerProps } from 'infrad/es/drawer';
import type { RadioChangeEvent } from 'infrad/es/radio';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
const showDrawer = () => {
setVisible(true);
};
const onChange = (e: RadioChangeEvent) => {
setPlacement(e.target.value);
};
const onClose = () => {
setVisible(false);
};
return (
<>
<Space>
<Radio.Group value={placement} onChange={onChange}>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</Radio.Group>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</Space>
<Drawer
title="Drawer with extra actions"
placement={placement}
width={500}
onClose={onClose}
visible={visible}
extra={
<Space>
<Button onClick={onClose}>Cancel</Button>
<Button type="primary" onClick={onClose}>
OK
</Button>
</Space>
}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;
TypeScript
JavaScript
import { PlusOutlined } from 'infra-design-icons';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'infrad';
import React, { useState } from 'react';
const { Option } = Select;
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
New account
</Button>
<Drawer
title="Create a new account"
width={720}
onClose={onClose}
visible={visible}
bodyStyle={{ paddingBottom: 80 }}
extra={
<Space>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onClose} type="primary">
Submit
</Button>
</Space>
}
>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: 'Please enter user name' }]}
>
<Input placeholder="Please enter user name" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="url"
label="Url"
rules={[{ required: true, message: 'Please enter url' }]}
>
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="Please enter url"
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="owner"
label="Owner"
rules={[{ required: true, message: 'Please select an owner' }]}
>
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="type"
label="Type"
rules={[{ required: true, message: 'Please choose the type' }]}
>
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="approver"
label="Approver"
rules={[{ required: true, message: 'Please choose the approver' }]}
>
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="dateTime"
label="DateTime"
rules={[{ required: true, message: 'Please choose the dateTime' }]}
>
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentElement!}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="description"
label="Description"
rules={[
{
required: true,
message: 'please enter url description',
},
]}
>
<Input.TextArea rows={4} placeholder="please enter url description" />
</Form.Item>
</Col>
</Row>
</Form>
</Drawer>
</>
);
};
export default App;
.site-form-in-drawer-wrapper {
position: absolute;
right: 0px;
bottom: 0px;
width: 100%;
padding: 10px 16px;
text-align: right;
background: #fff;
border-top: 1px solid #e9e9e9;
}
TypeScript
JavaScript
import { Button, Drawer } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const [childrenDrawer, setChildrenDrawer] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
const showChildrenDrawer = () => {
setChildrenDrawer(true);
};
const onChildrenDrawerClose = () => {
setChildrenDrawer(false);
};
return (
<>
<Button type="primary" onClick={showDrawer}>
Open drawer
</Button>
<Drawer
title="Multi-level drawer"
width={520}
closable={false}
onClose={onClose}
visible={visible}
>
<Button type="primary" onClick={showChildrenDrawer}>
Two-level drawer
</Button>
<Drawer
title="Two-level Drawer"
width={320}
closable={false}
onClose={onChildrenDrawerClose}
visible={childrenDrawer}
>
This is two-level drawer
</Drawer>
</Drawer>
</>
);
};
export default App;
TypeScript
JavaScript
import type { DrawerProps, RadioChangeEvent } from 'infrad';
import { Button, Drawer, Radio, Space } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
const onChange = (e: RadioChangeEvent) => {
setPlacement(e.target.value);
};
return (
<>
<Space>
<Radio.Group value={placement} onChange={onChange}>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</Radio.Group>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</Space>
<Drawer
title="Basic Drawer"
placement={placement}
closable={false}
onClose={onClose}
visible={visible}
key={placement}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;
Render in this
Basic Drawer
Some contents...
TypeScript
JavaScript
import { Button, Drawer } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={onClose}
visible={visible}
getContainer={false}
style={{ position: 'absolute' }}
>
<p>Some contents...</p>
</Drawer>
</div>
);
};
export default App;
.site-drawer-render-in-current-wrapper {
position: relative;
height: 200px;
padding: 48px;
overflow: hidden;
text-align: center;
background: #fafafa;
border: 1px solid #ebedf0;
border-radius: 2px;
}
TypeScript
JavaScript
import { Avatar, Col, Divider, Drawer, List, Row } from 'infrad';
import React, { useState } from 'react';
interface DescriptionItemProps {
title: string;
content: React.ReactNode;
}
const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
<div className="site-description-item-profile-wrapper">
<p className="site-description-item-profile-p-label">{title}:</p>
{content}
</div>
);
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<>
<List
dataSource={[
{
id: 1,
name: 'Lily',
},
{
id: 2,
name: 'Lily',
},
]}
bordered
renderItem={item => (
<List.Item
key={item.id}
actions={[
<a onClick={showDrawer} key={`a-${item.id}`}>
View Profile
</a>,
]}
>
<List.Item.Meta
avatar={
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
}
title={<a href="https://ant.design/index-cn">{item.name}</a>}
description="Progresser XTech"
/>
</List.Item>
)}
/>
<Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
User Profile
</p>
<p className="site-description-item-profile-p">Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="AntDesign@example.com" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="City" content="HangZhou" />
</Col>
<Col span={12}>
<DescriptionItem title="Country" content="China🇨🇳" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Birthday" content="February 2,1900" />
</Col>
<Col span={12}>
<DescriptionItem title="Website" content="-" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Message"
content="Make things as simple as possible but no simpler."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Company</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
</Col>
<Col span={12}>
<DescriptionItem title="Responsibilities" content="Coding" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Department" content="XTech" />
</Col>
<Col span={12}>
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Skills"
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."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Contacts</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="AntDesign@example.com" />
</Col>
<Col span={12}>
<DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Github"
content={
<a href="http://github.com/ant-design/ant-design/">
github.com/ant-design/ant-design/
</a>
}
/>
</Col>
</Row>
</Drawer>
</>
);
};
export default App;
.site-description-item-profile-wrapper {
margin-bottom: 7px;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
line-height: 1.5715;
}
[data-theme='compact'] .site-description-item-profile-wrapper {
font-size: 12px;
line-height: 1.66667;
}
.ant-drawer-body p.site-description-item-profile-p {
display: block;
margin-bottom: 16px;
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
line-height: 1.5715;
}
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
font-size: 14px;
line-height: 1.66667;
}
.site-description-item-profile-p-label {
display: inline-block;
margin-right: 8px;
color: rgba(0, 0, 0, 0.85);
}
TypeScript
JavaScript
import { Button, Drawer, Space } from 'infrad';
import type { DrawerProps } from 'infrad/es/drawer';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const [size, setSize] = useState<DrawerProps['size']>();
const showDefaultDrawer = () => {
setSize('default');
setVisible(true);
};
const showLargeDrawer = () => {
setSize('large');
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<>
<Space>
<Button type="primary" onClick={showDefaultDrawer}>
Open Default Size (378px)
</Button>
<Button type="primary" onClick={showLargeDrawer}>
Open Large Size (736px)
</Button>
</Space>
<Drawer
title={`${size} Drawer`}
placement="right"
size={size}
onClose={onClose}
visible={visible}
extra={
<Space>
<Button onClick={onClose}>Cancel</Button>
<Button type="primary" onClick={onClose}>
OK
</Button>
</Space>
}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;
API#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - | |
bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - | |
className | 对话框外层容器的类名 | string | - | |
closable | 是否显示左上角的关闭按钮 | boolean | true | |
closeIcon | 自定义关闭图标 | ReactNode | <CloseOutlined /> | |
contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - | |
destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | |
drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - | |
extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
footer | 抽屉的页脚 | ReactNode | - | |
footerStyle | 抽屉页脚部件的样式 | CSSProperties | - | |
forceRender | 预渲染 Drawer 内元素 | boolean | false | |
getContainer | 指定 Drawer 挂载的节点,并在容器内展现,false 为挂载在当前位置 | HTMLElement | () => HTMLElement | Selectors | false | body | |
headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - | |
height | 高度, 在 placement 为 top 或 bottom 时使用 | string | number | 378 | |
keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
mask | 是否展示遮罩 | boolean | true | |
maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
maskStyle | 遮罩样式 | CSSProperties | {} | |
placement | 抽屉的方向 | top | right | bottom | left | right | |
push | 用于设置多层 Drawer 的推动行为 | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
size | 预设抽屉宽度(或高度),default 378px 和 large 736px | 'default' | 'large' | 'default' | 4.17.0 |
style | 可用于设置 Drawer 最外层容器的样式,和 drawerStyle 的区别是作用节点包括 mask | CSSProperties | - | |
title | 标题 | ReactNode | - | |
visible | Drawer 是否可见 | boolean | - | |
width | 宽度 | string | number | 378 | |
zIndex | 设置 Drawer 的 z-index | number | 1000 | |
onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |