抽屉 Drawer

屏幕边缘滑出的浮层面板，用于承载临时内容或操作。

何时使用

• 需要从屏幕边缘滑出一个面板来承载内容
• 用于移动端或空间受限的场景
• 替代 Modal 对话框，提供更自然的过渡效果

示例

基础用法

最简单的用法，从右侧滑出抽屉。

不同方向

支持从上、右、下、左四个方向滑出。

自定义尺寸

可以自定义抽屉的宽度（左右方向）或高度（上下方向）。

移动端模式

为移动端优化的抽屉样式，提供更好的用户体验。

无底部抽屉

通过 showFooter 属性隐藏底部操作栏。

表单抽屉

在抽屉中放置表单，常用于新建或编辑操作。

API

Drawer

参数	说明	类型	默认值
open	是否显示抽屉	boolean	false
title	标题	ReactNode	-
placement	抽屉方向	'top' | 'right' | 'bottom' | 'left'	'right'
closable	是否显示关闭按钮	boolean	true
closeByOverlay	点击蒙层是否可以关闭	boolean	true
onClose	关闭时的回调	() => void	-
onOk	点击确认按钮的回调	() => void	-
width	抽屉宽度（左右方向时有效）	number | string	378
height	抽屉高度（上下方向时有效）	number | string	378
footer	自定义 footer，设置为 null 则不显示	ReactNode | null	-
showFooter	是否显示 footer	boolean	true
okText	确认按钮文字	string	'确定'
cancelText	取消按钮文字	string	'取消'
okButtonProps	确认按钮属性	Omit<ButtonProps, 'children' | 'onClick'>	-
cancelButtonProps	取消按钮属性	Omit<ButtonProps, 'children' | 'onClick'>	-
showCancel	是否显示取消按钮	boolean	true
isMobile	是否为移动端模式	boolean	false
children	子元素（正文内容）	ReactNode	-
className	自定义类名	string	-
afterOpenChange	打开/关闭动画完成后的回调	(open: boolean) => void	-