Drawer

何时使用 {#when-to-use}

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

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

开发者注意事项：

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

代码演示 {#examples}

<!-- prettier-ignore -->

<code src="./demo/basic-right.tsx">基础抽屉</code> <code src="./demo/placement.tsx">自定义位置</code> <code src="./demo/resizable.tsx" version="6.0.0">可调整大小</code> <code src="./demo/loading.tsx" version="5.17.0">加载中</code> <code src="./demo/extra.tsx">额外操作</code> <code src="./demo/render-in-current.tsx">渲染在当前 DOM</code> <code src="./demo/form-in-drawer.tsx">抽屉表单</code> <code src="./demo/user-profile.tsx">信息预览抽屉</code> <code src="./demo/multi-level-drawer.tsx">多层抽屉</code> <code src="./demo/size.tsx">预设宽度</code> <code src="./demo/mask.tsx">遮罩</code> <code src="./demo/closable-placement.tsx" version="5.28.0">关闭按钮位置</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/config-provider.tsx" debug>ConfigProvider</code> <code src="./demo/no-mask.tsx" debug>无遮罩</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/scroll-debug.tsx" debug>滚动锁定调试</code> <code src="./demo/component-token.tsx" debug>组件 Token</code>

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
afterOpenChange	切换抽屉时动画结束后的回调	function(open)	-
bodyStyle	抽屉内容区域样式，请使用 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
contentWrapperStyle	抽屉包裹层样式，请使用 styles.wrapper 替代	CSSProperties	-	-
destroyOnClose	关闭时销毁 Drawer 里的子元素	boolean	false
destroyInactivePanel	关闭时销毁 Drawer 里的子元素，请使用 destroyOnHidden 替代	boolean	false	-
destroyOnHidden	关闭时销毁 Drawer 里的子元素	boolean	false	5.25.0
drawerStyle	抽屉面板样式，请使用 styles.section 替代	CSSProperties	-	-
extra	抽屉右上角的操作区域	ReactNode	-	4.17.0
footer	抽屉的页脚	ReactNode	-
footerStyle	抽屉底部样式，请使用 styles.footer 替代	CSSProperties	-	-
forceRender	预渲染 Drawer 内元素	boolean	false
focusable	抽屉内焦点管理的配置	{ trap?: boolean, focusTriggerAfterClose?: boolean }	-	6.2.0
getContainer	指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置	HTMLElement | () => HTMLElement | Selectors | false	body
headerStyle	抽屉头部的样式，请使用 styles.header 替换	CSSProperties	-
height	高度，在 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
maskClosable	点击蒙层是否允许关闭	boolean	true
maskStyle	抽屉遮罩样式，请使用 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	-
width	宽度，请使用 size 替换	string | number	378
zIndex	设置 Drawer 的 z-index	number	1000
onClose	点击遮罩层或左上角叉或取消按钮的回调	function(e)	-
drawerRender	自定义渲染抽屉	(node: ReactNode) => ReactNode	-	5.18.0

ResizableConfig

参数	说明	类型	默认值	版本
onResizeStart	开始拖拽调整大小时的回调	() => void	-	6.0.0
onResize	拖拽调整大小时的回调	(size: number) => void	-	6.0.0
onResizeEnd	结束拖拽调整大小时的回调	() => void	-	6.0.0

Semantic DOM {#semantic-dom}

<code src="./demo/_semantic.tsx" simplify="true"></code>

主题变量（Design Token）{#design-token}

<ComponentTokenTable component="Drawer"></ComponentTokenTable>