5.24.7

Drawer
抽屉

屏幕边缘滑出的浮层面板。
使用import { Drawer } from "antd";

何时使用

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

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

开发者注意事项:

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 里。自定义容器,查看 getContainer

注意:在 v5 中 styleclassName 迁移至 Drawer 面板上与 Modal 保持一致,原 styleclassName 替换为 rootStylerootClassName

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

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

通用属性参考:通用属性

参数说明类型默认值版本
autoFocus抽屉展开后是否将焦点切换至其 DOM 节点booleantrue4.17.0
afterOpenChange切换抽屉时动画结束后的回调function(open)-
classNameDrawer 容器外层 className 设置,如果需要设置最外层,请使用 rootClassNamestring-
classNames语义化结构 classNameRecord<SemanticDOM, string>-5.10.0
closeIcon自定义关闭图标。5.7.0:设置为 nullfalse 时隐藏关闭按钮ReactNode<CloseOutlined />
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
extra抽屉右上角的操作区域ReactNode-4.17.0
footer抽屉的页脚ReactNode-
forceRender预渲染 Drawer 内元素booleanfalse
getContainer指定 Drawer 挂载的节点,并在容器内展现false 为挂载在当前位置HTMLElement | () => HTMLElement | Selectors | falsebody
height高度,在 placementtopbottom 时使用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如何定制?