模态框

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

安装

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

导入

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

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

用法

当模态框打开时

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

尺寸

不可关闭

默认情况下，可以通过单击覆盖层或按下 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 插槽来自定义背景幕。

自定义动画

模态框提供了一个 motionProps 属性来自定义 enter / exit 动画。

在此处了解有关 Framer 动画变体的更多信息 这里。

可拖动

尝试拖动标题部分。

可拖动溢出

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

插槽

• wrapper：模态框的包装器插槽。它包装 base 和 backdrop 插槽。
• base：模态框内容的主要插槽。
• backdrop：背景幕插槽，显示在模态框后面。
• header：模态框的标题，显示在模态框的顶部。
• body：模态框的主体，显示在模态框的中间。
• footer：模态框的页脚，显示在模态框的底部。
• closeButton：模态框的关闭按钮。

自定义样式

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

数据属性

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

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

可访问性

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

API

模态框属性

模态框事件

模态框类型

动画属性