模态框

显示一个带有自定义内容的对话框，需要用户关注或提供更多信息。

安装

npx nextui-cli@latest add modal

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

导入

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

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

使用

当模态打开时

• 焦点被限制在模态内，并设置为第一个可获得焦点的元素。
• 模态对话框后面的内容处于非活动状态，这意味着用户无法与其交互。

尺寸

不可关闭

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

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

模态框位置

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

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

溢出滚动

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

• 内部: 模态框内容将可滚动。
• 外部: 模态框内容将可滚动，模态框将固定。

使用表单

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

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

背景

The Modal 组件有一个 backdrop 属性，用于在模态框后面显示背景。背景可以是 透明、不透明 或 模糊。默认值为 不透明。

自定义背景

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

自定义动画

Modal 提供了一个 motionProps 属性，用于自定义 进入 / 退出 动画。

了解更多关于 Framer Motion 变体的知识 这里.

插槽

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

自定义样式

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

数据属性

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

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

无障碍性

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

API

模态框属性

模态框事件

模态类型

运动属性

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/