使用import { Drawer } from 'antd'; |
文档贡献者
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
开发者注意事项：
自
5.17.0版本，我们提供了loading属性，内置 Spin 组件作为加载状态，但是自5.18.0版本开始，我们修复了设计失误，将内置的 Spin 组件替换成了 Skeleton 组件，同时收窄了loadingapi 的类型范围，只能接收 boolean 类型。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
抽屉内容区域样式，请使用 styles.body 替代 | CSSProperties | - | - | |
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
| classNames | 用于自定义 Drawer 组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| closable | 是否显示关闭按钮。可通过 placement 配置其位置 | boolean | { closeIcon?: React.ReactNode; disabled?: boolean; placement?: 'start' | 'end' } | true | placement: 5.28.0 |
抽屉包裹层样式，请使用 styles.wrapper 替代 | CSSProperties | - | - | |
| 关闭时销毁 Drawer 里的子元素 | boolean | false | ||
关闭时销毁 Drawer 里的子元素，请使用 destroyOnHidden 替代 | boolean | false | - | |
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
抽屉面板样式，请使用 styles.section 替代 | CSSProperties | - | - | |
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
| footer | 抽屉的页脚 | ReactNode | - | |
抽屉底部样式，请使用 styles.footer 替代 | CSSProperties | - | - | |
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
| focusable | 抽屉内焦点管理的配置 | { trap?: boolean, focusTriggerAfterClose?: boolean } | - | 6.2.0 |
| getContainer | 指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置 | HTMLElement | () => HTMLElement | Selectors | false | body | |
抽屉头部的样式，请使用 styles.header 替换 | CSSProperties | - | ||
高度，在 placement 为 top 或 bottom 时使用，请使用 size 替换 | string | number | 378 | ||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
| mask | 遮罩效果 | boolean | { enabled?: boolean, blur?: boolean, closable?: boolean } | true | mask.closable: 6.3.0 |
| 点击蒙层是否允许关闭 | boolean | true | ||
抽屉遮罩样式，请使用 styles.mask 替代 | CSSProperties | - | - | |
| maxSize | 可拖拽的最大尺寸（宽度或高度，取决于 placement） | number | - | 6.0.0 |
| open | Drawer 是否可见 | boolean | false | |
| placement | 抽屉的方向 | top | right | bottom | left | right | |
| push | 用于设置多层 Drawer 的推动行为 | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
| resizable | 是否启用拖拽改变尺寸 | boolean | ResizableConfig | - | boolean: 6.1.0 |
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 style 的区别是作用节点包括 mask | CSSProperties | - | |
| size | 预设抽屉宽度（或高度），default 378px 和 large 736px，或自定义数字 | 'default' | 'large' | number | string | 'default' | 4.17.0, string: 6.2.0 |
| style | Drawer 面板的样式，如需仅配置 body 部分，请使用 styles.body | CSSProperties | - | |
| styles | 用于自定义 Drawer 组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| title | 标题 | ReactNode | - | |
宽度，请使用 size 替换 | string | number | 378 | ||
| zIndex | 设置 Drawer 的 z-index | number | 1000 | |
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| onResizeStart | 开始拖拽调整大小时的回调 | () => void | - | 6.0.0 |
| onResize | 拖拽调整大小时的回调 | (size: number) => void | - | 6.0.0 |
| onResizeEnd | 结束拖拽调整大小时的回调 | () => void | - | 6.0.0 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| draggerSize | 拖拽手柄大小 | number | 4 |
| footerPaddingBlock | 底部区域纵向内间距 | number | 8 |
| footerPaddingInline | 底部区域横向内间距 | number | 16 |
| zIndexPopup | 弹窗 z-index | number | 1000 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgElevated | 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。 | string | #ffffff |
| colorBgMask | 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer、Image 等组件的蒙层使用的是该 token | string | rgba(0,0,0,0.45) |
| colorBgTextActive | 控制文本在激活状态下的背景色。 | string | rgba(0,0,0,0.15) |
| colorBgTextHover | 控制文本在悬停状态下的背景色。 | string | rgba(0,0,0,0.06) |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorIconHover | 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。 | string | rgba(0,0,0,0.88) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryBorder | 主色梯度下的描边用色，用在 Slider 等组件的描边上。 | string | #91caff |
| colorSplit | 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。 | string | rgba(5,5,5,0.06) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| fontSizeLG | 大号字体大小 | number | 16 |
| fontWeightStrong | 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。 | number | 600 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthFocus | 控制线条的宽度，当组件处于聚焦态时。 | number | 3 |
| marginXS | 控制元素外边距，小尺寸。 | number | 8 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| padding | 控制元素的内间距。 | number | 16 |
| paddingLG | 控制元素的大内间距。 | number | 24 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
