Drawer 抽屉组件

显示一个从屏幕边缘滑入的面板，包含辅助性内容。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

HeroUI 导出 5 个与抽屉相关的组件：

• Drawer：显示抽屉的主要组件。
• DrawerContent：其他抽屉组件的包装器。
• DrawerHeader：抽屉的头部。
• DrawerBody：抽屉的主体。
• DrawerFooter：抽屉的底部。

用法

当抽屉打开时：

• 焦点被限制在抽屉内，并设置为第一个可聚焦元素。
• 抽屉后面的内容变为不可交互状态，用户无法与其交互。

尺寸

不可关闭

默认情况下，可以通过点击遮罩层或按下 Esc 键来关闭抽屉。 您可以通过设置以下属性来禁用此行为：

• 将 isDismissable 属性设置为 false 可防止点击遮罩层时关闭抽屉。
• 将 isKeyboardDismissDisabled 属性设置为 true 可防止按下 Esc 键时关闭抽屉。

抽屉位置

使用 placement 属性可以将抽屉放置在屏幕的任意边缘：

• left
• right (默认值)
• top
• bottom

结合表单使用

Drawer 组件会处理抽屉内容内的焦点管理。这意味着您可以与表单元素一起使用抽屉而不会出现问题。当抽屉关闭时，焦点会返回到触发器元素。

注意：您可以在第一个 Input 组件上添加 autoFocus 属性，以便在抽屉打开时使其获得焦点。

背景遮罩

Drawer 组件有一个 backdrop 属性，用于在抽屉后面显示背景遮罩。背景遮罩可以是 transparent（透明）、opaque（不透明）或 blur（模糊）。默认值为 opaque（不透明）。

自定义动效

Drawer 提供了一个 motionProps 属性，用于自定义 enter（进入）/ exit（退出）动画。

了解更多关于 Framer motion variants 的信息，请点击此处。

自定义样式

Drawer 组件设计灵感来源于 Luma。

插槽

• wrapper：抽屉的包装器插槽。它包装了 base 和 backdrop 插槽。
• base：抽屉内容的主要插槽。
• backdrop：背景遮罩插槽，显示在抽屉后面。
• header：抽屉头部，显示在抽屉顶部。
• body：抽屉主体，显示在抽屉中间。
• footer：抽屉底部，显示在抽屉底部。
• closeButton：抽屉的关闭按钮。

数据属性

Drawer 在 base 元素上具有以下属性：

• data-open： 当抽屉打开时存在。基于抽屉状态。
• data-dismissable： 当抽屉可关闭时存在。基于 isDismissable 属性。

可访问性

• 抽屉打开时，其外部内容对辅助技术隐藏。
• 可选择在外部交互或按下 Esc 键时关闭抽屉。
• 挂载时将焦点移入抽屉，卸载时将焦点恢复到触发器元素。
• 打开时，焦点被限制在抽屉内，防止用户切换到外部。
• 打开时阻止页面滚动（包括移动浏览器）。

API

Drawer 属性

Drawer 事件

Drawer 类型

Motion Props