Drawer

Drawer 是一个从屏幕边缘滑出的浮层面板。

Usage

设置 Drawer 的 hideBackdrop 属性为 true 可以隐藏 Drawer 的背景遮罩。

设置 Drawer 的 preventScroll 属性为 true 可以限制 Drawer 打开时页面滚动。

设置 Drawer 的 keepMounted 属性为 true 可以保持 Drawer 内容在关闭时仍然挂载。

DrawerContent 的 size 属性可以设置 Drawer 的大小，默认为 md。

DrawerContent 的 placement 属性可以设置 Drawer 的显示位置，默认为 right。

DrawerContent 的 motionProps 属性可以自定义 Drawer 显示/隐藏的动画效果。

DrawerClose 支持异步关闭 Drawer，其 children 的 onClick 事件可返回一个 Promise，Drawer 会在 Promise 被 resolve 后关闭。

使用 Drawer 的 open 和 onOpenChange 属性来控制 Drawer 的打开状态。

Drawer is closed

Drawer 继承 as (默认为 m.div) 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	通常是 DrawerContent、DrawerTrigger 等组件。
open	boolean	-	控制 Drawer 的打开状态。(受控)
defaultOpen	boolean	-	Drawer 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Drawer 打开/关闭时触发回调函数。
className	ClassValue	-	用于根元素的 className。
hideBackdrop	boolean	false	是否隐藏 Drawer 的背景遮罩。
container	HTMLElement\|null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
keepMounted	boolean	false	是否保持 Drawer 内容在关闭时仍然挂载。
preventScroll	boolean	false	是否限制 Drawer 打开时页面滚动。
closeOnInteractBackdrop	boolean	true	是否在与背景遮罩交互时关闭 Drawer。
closeOnEscape	boolean	true	是否在按下 Escape 键时关闭 Drawer。
restoreFocus	boolean	true	是否在 Drawer 关闭时恢复焦点到之前聚焦的元素。
onClose	() => void	-	Drawer 关闭时执行的回调函数。
as	ElementType	m.div	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	Drawer Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Drawer Slots 的 props。

Slot Name	Class Name	Default Component	Description
backdrop	.nui-drawer-backdrop	'div'	Drawer 的背景遮罩元素。

DrawerContent 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	通常是 DrawerHeader、DrawerBody、DrawerFooter 等组件。
closeIcon	ReactNode	-	自定义 Drawer 的关闭图标。
size	'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'full'	'md'	Drawer 的尺寸。
hideCloseButton	boolean	false	是否隐藏 Drawer 的关闭按钮。
placement	'top'\|'bottom'\|'left'\|'right'	'right'	Drawer 的显示位置。
motionProps	HTMLMotionProps\|(placement) => HTMLMotionProps	-	自定义 Drawer 的动画效果。
aria-labelledby	string	-	Drawer 标题的 ARIA 标签。
aria-describedby	string	-	Drawer 描述的 ARIA 标签。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
className	ClassValue	-	用于根元素的 className。
classNames	Partial<Record<Slots, ClassValue>>	-	DrawerContent Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	DrawerContent Slots 的 props。

Slot Name	Class Name	Default Component	Description
closeButton	.nui-drawer-content-close-button	'button'	Drawer 的关闭按钮元素。
paper	.nui-drawer-content-paper	m.section	Drawer 的内容部分。

DrawerHeader 继承 as (默认为 'h2') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Drawer 的标题内容。
as	ElementType	'h2'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
className	ClassValue	-	用于根元素的 className。

DrawerBody 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Drawer 的内容。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
className	ClassValue	-	用于根元素的 className。

DrawerFooter 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Drawer 的底部内容。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
className	ClassValue	-	用于根元素的 className。

Prop	Type	Default	Description
children	ReactNode	-	触发 Drawer 打开的元素，需支持 `onClick` 事件。

Prop	Type	Default	Description
children	ReactNode	-	触发 Drawer 关闭的元素，需支持 `onClick` 事件。