Modal

展示包含需要关注或提供额外信息的自定义内容的对话框。

安装

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

导入

HeroUI 导出了 5 个与模态框相关的组件：

• Modal: 用于显示模态框的主要组件。
• ModalContent: 模态框其他组件的包装器。
• ModalHeader: 模态框的头部。
• ModalBody: 模态框的主体。
• ModalFooter: 模态框的底部。

用法

当模态框打开时：

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

尺寸

不可关闭

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

• 将 isDismissable 属性设置为 false 以阻止点击遮罩层时关闭模态框。
• 将 isKeyboardDismissDisabled 属性设置为 true 以阻止按下 Esc 键时关闭模态框。

模态框位置

默认情况下，模态框在大于 sm 的屏幕上居中显示，在移动设备上位于屏幕底部。此位置称为 auto，但您可以通过使用 placement 属性来更改它。

注意：top-center 和 bottom-center 位置意味着模态框在移动设备上位于屏幕顶部/底部，在桌面上位于屏幕中央。

溢出滚动

您可以使用 scrollBehavior 属性来设置模态框的滚动行为。

• inside: 模态框内容将可滚动。
• outside: 模态框内容将可滚动且模态框将被固定。

带表单

Modal 处理模态框内容内的焦点。这意味着您可以在没有任何问题的情况下将模态框与表单元素一起使用。当模态框关闭时，焦点会返回到触发器。

注意：您可以在第一个 Input 组件上添加 autoFocus 属性以在模态框打开时聚焦它。

遮罩

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

自定义遮罩

您可以通过使用 backdrop 插槽来自定义遮罩。

自定义动效

Modal 提供了一个 motionProps 属性来自定义 enter（进入）/ exit（退出）动画。

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

可拖拽

尝试通过点击模态框头部并拖拽来拖动模态框。

可拖拽溢出

将 overflow 设置为 true 允许用户将模态框拖到视口溢出的位置。

插槽

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

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制 Modal 组件。

数据属性

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

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

可访问性

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

API

Modal 属性

Modal 事件

Modal 类型

Motion Props