抽屉 (Drawer)

显示从屏幕边缘滑入的面板，其中包含补充内容。

安装 (Installation)

以上命令仅用于单独安装。如果已全局安装，则可以跳过此步骤 @heroui/react。

导入 (Import)

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

• Drawer: 用于显示抽屉的主组件。
• DrawerContent: 其他抽屉组件的包装器。
• DrawerHeader: 抽屉的头部。
• DrawerBody: 抽屉的主体。
• DrawerFooter: 抽屉的页脚。

用法 (Usage)

当抽屉打开时 (When the drawer opens)

• 焦点被限定在抽屉内，并设置到第一个可聚焦元素。
• 抽屉后面的内容是惰性的，意味着用户无法与之交互。

尺寸 (Sizes)

不可关闭 (Non-dismissible)

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

• 将 isDismissable 属性设置为 false，以防止在单击叠加层时关闭抽屉。
• 将 isKeyboardDismissDisabled 属性设置为 true，以防止在按 Esc 键时关闭抽屉。

抽屉位置 (Drawer placement)

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

• 左侧 (left)
• right (默认)
• 顶部 (top)
• 底部 (bottom)

带表单 (With Form)

Drawer 处理抽屉内容中的焦点。这意味着您可以毫无问题地将抽屉与表单元素一起使用。当抽屉关闭时，焦点返回到触发器。

注意: 您可以将 autoFocus 属性添加到第一个 Input 组件，以便在抽屉打开时聚焦它。

背景幕 (Backdrop)

Drawer 组件具有 backdrop 属性，用于在抽屉后面显示背景幕。背景幕可以是 transparent、opaque 或 blur。默认值为 opaque。

自定义动画 (Custom Motion)

Drawer 提供 motionProps 属性来自定义 enter / exit 动画。

了解有关 Framer motion variants 的更多信息 此处 (here)。

自定义样式

抽屉组件的设计灵感来源于 Luma。

插槽

• wrapper: 抽屉的 wrapper 插槽。它包裹着 base 和 backdrop 插槽。
• base: 抽屉内容的主要插槽。
• backdrop: backdrop 插槽，它显示在抽屉的后面。
• header: 抽屉的 header，它显示在抽屉的顶部。
• body: 抽屉的 body，它显示在抽屉的中间。
• footer: 抽屉的 footer，它显示在抽屉的底部。
• closeButton: 抽屉的关闭按钮。

数据属性

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

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

无障碍性

• 当抽屉打开时，辅助技术会隐藏抽屉外部的内容。
• 当在外部交互或按下 Esc 键时，抽屉可以选择性地关闭。
• 焦点在挂载时移动到抽屉中，并在卸载时恢复到触发元素。
• 在打开时，焦点被限制在抽屉内，防止用户在外部进行 tab 切换。
• 当抽屉打开时，页面在抽屉后面的滚动被阻止，包括在移动浏览器中。

API

抽屉属性

抽屉事件

抽屉类型

Motion Props