Popover（弹出框）

弹出框是一个非模态对话框，它浮动在其触发器周围。它通常用于在某事物之上显示额外的富内容。

安装

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

导入

NextUI 导出了 3 个与弹出框相关的组件

• Popover：用于显示弹出框的主要组件。
• PopoverTrigger：触发弹出框的组件。
• PopoverContent：包含弹出框内容的组件。

用法

带箭头

颜色

位置

偏移量

受控

标题属性

为了确保弹出框向辅助技术暴露正确的标题，您应该在 PopoverContent 组件上使用 titleProps 属性。要使用此属性，您必须将一个函数作为子元素传递。

带表单

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

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

背景幕

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

自定义动画

Popover 提供一个 motionProps 属性来自定义 enter / exit 动画。

了解有关 Framer motion 变体的更多信息，请点击此处。

自定义触发器

插槽

• base：主要的弹出框插槽，它包裹弹出框内容，并包含作为伪元素 (::before) 的箭头。
• trigger：弹出框触发器插槽，它有一些小的样式以确保触发器正常工作。
• backdrop：背景幕插槽，它包含背景幕的样式。
• content：内容插槽，它包含弹出框内容。

自定义样式

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

数据属性

Popover 在 PopoverContent 元素上具有以下属性

• data-open: 当弹出框打开时。基于弹出框的状态。
• data-placement: 弹出框的位置。基于 placement 属性。箭头元素的位置基于此属性。
• data-focus: 当弹出框被聚焦时。基于 useFocusRing。
• data-focus-visible: 当弹出框通过键盘聚焦时。基于 useFocusRing。

无障碍性

• 触发器和弹出框通过 ARIA 自动进行语义关联。
• 弹出框打开时，辅助技术会隐藏弹出框外部的内容。
• 在外部交互或按下 Escape 键时，弹出框会关闭。
• 焦点会在挂载时移动到弹出框中，并在卸载时恢复到触发器元素。
• 弹出框相对于触发器元素定位，并自动翻转和调整以避免与浏览器窗口边缘重叠。
• 弹出框外部的滚动被阻止，以避免意外地重新定位或关闭它。

API

Popover 属性

Popover 事件

PopoverTrigger 属性

PopoverContent 属性

Popover 类型

Popover 位置

Motion 属性