Drawer

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

Anatomy

NexUI 导出了 7 个 Drawer 相关组件:

Drawer: 用于显示 Drawer 的根组件。
DrawerContent: 用于显示 Drawer 内容的组件。
DrawerHeader: 用于显示 Drawer 标题的组件。
DrawerBody: 用于显示 Drawer 主体内容的组件。
DrawerFooter: 用于显示 Drawer 底部内容的组件。
DrawerTrigger: 用于触发 Drawer 打开的组件。
DrawerClose: 用于触发 Drawer 关闭的组件。


import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  DrawerTrigger,
  DrawerClose,
} from '@nex-ui/react'

Usage

Hide Backdrop

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

Prevent Scroll

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

Keep Mounted

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

Sizes

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

Placements

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

Custom Motion

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

Asynchronous Closing

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

Prevent Close

DrawerClose 可在 children 的 onClick 中调用 event.preventDefault() 阻止 Drawer 关闭。

Controlled Drawer

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

Drawer is closed

API

Drawer Props

Prop	Type	Default	Description
children	ReactNode	-	通常是 DrawerContent、DrawerTrigger 等组件。
open	boolean	-	控制 Drawer 的打开状态。(受控)
defaultOpen	boolean	-	Drawer 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Drawer 打开/关闭时触发回调函数。
onClose	() => void	-	Drawer 关闭时执行的回调函数。

DrawerContent Props

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

Prop	Type	Default	Description
children	ReactNode	-	通常是 DrawerHeader、DrawerBody、DrawerFooter 等组件。
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。
ref	Ref	-	Ref 用于转发到根元素。
closeIcon	ReactNode	-	自定义 Drawer 的关闭图标。
size	'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'full'	'md'	Drawer 的尺寸。
radius	'sm'\|'md'\|'lg'\|'none'	'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 标签。
hideBackdrop	boolean	false	是否隐藏 Drawer 的背景遮罩。
container	HTMLElement\|null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
keepMounted	boolean	false	是否保持 Drawer 内容在关闭时仍然挂载。
preventScroll	boolean	false	是否限制 Drawer 打开时页面滚动。
closeOnInteractOutside	boolean	true	是否在点击 Drawer 外部时关闭 Drawer。
closeOnEscape	boolean	true	是否在按下 Escape 键时关闭 Drawer。
restoreFocus	boolean	true	是否在 Drawer 关闭时恢复焦点到之前聚焦的元素。
disableAnimation	boolean	false	是否禁用 Drawer 的动画效果。
autoFocus	boolean	false	是否在 Drawer 打开时自动聚焦到第一个可聚焦元素。

DrawerContent Slots

Slot Name	Class Name	Default Component	Description
closeButton	.nui-drawer-content-close-button	'button'	Drawer 的关闭按钮元素。
paper	.nui-drawer-content-paper	'div'	Drawer 的内容部分。
backdrop	.nui-drawer-content-backdrop	'div'	Drawer 的背景遮罩元素。

DrawerHeader Props

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

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

DrawerBody Props

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

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

DrawerFooter Props

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

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

DrawerTrigger Props

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

DrawerClose Props

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