模态框

显示一个对话框，其中包含需要关注或提供额外信息的自定义内容。

安装

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

导入

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

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

用法

当模态框打开时

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

尺寸

不可关闭

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

• 将 isDismissable 属性设置为 false 以防止在单击覆盖层时关闭模态框。
• 将 isKeyboardDismissDisabled 属性设置为 true 以防止在按 Esc 键时关闭模态框。

模态框位置

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

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

溢出滚动

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

• inside: 模态框内容将可滚动。
• outside: 模态框内容将可滚动，并且模态框将是固定的。

带有表单

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

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

背景

Modal 组件具有 backdrop 属性，用于在模态框后面显示背景。背景可以是 transparent (透明), opaque (不透明) 或 blur (模糊)。默认值为 opaque。

自定义背景

您可以使用 backdrop 插槽自定义背景。

自定义动画

Modal 组件提供 motionProps 属性来自定义 enter (进入) / exit (退出) 动画。

了解更多关于 Framer motion variants 的信息此处。

可拖拽

尝试拖拽头部部分。

可拖拽溢出

将 overflow 设置为 true 可以拖拽溢出视口。

插槽

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

自定义样式

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

数据属性

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

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

无障碍性

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

API

Modal Props

Modal Events

Modal types

Motion Props