抽屉

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

安装

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

导入

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

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

用法

当抽屉打开时

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

尺寸

不可关闭

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

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

抽屉位置

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

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

使用表单

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

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

背景幕

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

自定义动画

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

在此处了解有关 Framer motion 变体的更多信息 此处。

自定义样式

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

插槽

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

数据属性

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

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

可访问性

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

API

抽屉 Props

抽屉事件

抽屉类型

Motion Props