logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Drawer
抽屉

屏幕边缘滑出的浮层面板。
使用import { Drawer } from "antd";
源码components/drawer
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

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

  • 当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。
  • 当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。

开发者注意事项:

自 5.17.0 版本,我们提供了 loading 属性,内置 Spin 组件作为加载状态,但是自 5.18.0 版本开始,我们修复了设计失误,将内置的 Spin 组件替换成了 Skeleton 组件,同时收窄了 loading api 的类型范围,只能接收 boolean 类型。

代码演示

基础抽屉

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
加载中

设置抽屉加载状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.17.0
Render in this
渲染在当前 DOM

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

注意:在 v5 中 style 与 className 迁移至 Drawer 面板上与 Modal 保持一致,原 style 与 className 替换为 rootStyle 与 rootClassName。

当 getContainer 返回 DOM 节点时,需要手动设置 rootStyle 为 { position: 'absolute' },参考 #41951。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Lily

    Progresser XTech
    • View Profile
  • Lily

    Progresser XTech
    • View Profile
信息预览抽屉

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
预设宽度

抽屉的默认宽度为 378px,另外还提供一个大号抽屉 736px,可以用 size 属性来设置。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义位置

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
额外操作

在 Ant Design 规范中,操作按钮建议放在抽屉的右上角,可以使用 extra 属性来实现。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
抽屉表单

在抽屉中使用表单。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
多层抽屉

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义内部样式

通过 classNames 属性设置抽屉内部区域(header、body、footer、mask、wrapper)的 className。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

注意

v5 使用 rootClassName 与 rootStyle 来配置最外层元素样式。原 v4 className 与 style 改至配置 Drawer 窗体样式以和 Modal 对齐。

参数说明类型默认值版本
autoFocus抽屉展开后是否将焦点切换至其 DOM 节点booleantrue4.17.0
afterOpenChange切换抽屉时动画结束后的回调function(open)-
classNameDrawer 容器外层 className 设置,如果需要设置最外层,请使用 rootClassNamestring-
classNames语义化结构 classNameRecord<SemanticDOM, string>-5.10.0
closeIcon自定义关闭图标。5.7.0:设置为 null 或 false 时隐藏关闭按钮ReactNode<CloseOutlined />
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
destroyOnHidden关闭时销毁 Drawer 里的子元素booleanfalse5.25.0
extra抽屉右上角的操作区域ReactNode-4.17.0
footer抽屉的页脚ReactNode-
forceRender预渲染 Drawer 内元素booleanfalse
getContainer指定 Drawer 挂载的节点,并在容器内展现,false 为挂载在当前位置HTMLElement | () => HTMLElement | Selectors | falsebody
height高度,在 placement 为 top 或 bottom 时使用string | number378
keyboard是否支持键盘 esc 关闭booleantrue
mask是否展示遮罩booleantrue
maskClosable点击蒙层是否允许关闭booleantrue
placement抽屉的方向top | right | bottom | leftright
push用于设置多层 Drawer 的推动行为boolean | { distance: string | number }{ distance: 180 }4.5.0+
rootStyle可用于设置 Drawer 最外层容器的样式,和 style 的区别是作用节点包括 maskCSSProperties-
size预设抽屉宽度(或高度),default 378px 和 large 736px'default' | 'large''default'4.17.0
style设计 Drawer 容器样式,如果你只需要设置内容部分请使用 styles.bodyCSSProperties-
styles语义化结构 styleRecord<SemanticDOM, CSSProperties>-5.10.0
title标题ReactNode-
loading显示骨架屏booleanfalse5.17.0
openDrawer 是否可见boolean-
width宽度string | number378
zIndex设置 Drawer 的 z-indexnumber1000
onClose点击遮罩层或左上角叉或取消按钮的回调function(e)-
drawerRender自定义渲染抽屉(node: ReactNode) => ReactNode-5.18.0

Semantic DOM

  • mask
    5.13.0
    遮罩层元素
  • content
    5.13.0
    Drawer 容器元素
  • header
    5.13.0
    头部元素
  • body
    5.13.0
    内容元素
  • footer
    5.13.0
    底部元素

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
footerPaddingBlock底部区域纵向内间距number8
footerPaddingInline底部区域横向内间距number16
zIndexPopup弹窗 z-indexnumber1000
全局 Token如何定制?