Popover

Popover 是一种 非模态 对话框，它浮动在其披露元素周围。通常用于显示 额外的丰富内容在某物上方。

安装

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

导入

HeroUI 导出了 3 个与 popover 相关的组件：

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

使用

带箭头

颜色

位置

偏移

受控

标题属性

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

带表单

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

注意：您可以向第一个 Input 组件添加 autoFocus 属性，以便在 popover 打开时对其进行焦点。

背景遮罩

Popover 组件有一个 backdrop 属性，用于在 popover 后面显示背景遮罩。背景遮罩可以是 transparent、opaque 或 blur。默认值为 transparent。

自定义动画

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

了解更多关于 Framer 动画变体的信息，请参阅 此处。

自定义触发器

插槽

• base：主要 popover 插槽，它包装 popover 内容并将箭头作为伪元素 (::before) 包含在内。
• trigger：popover 触发器插槽，它具有少量样式以确保触发器正确工作。
• backdrop：背景遮罩插槽，它包含背景遮罩样式。
• content：内容插槽，它包含 popover 内容。

自定义样式

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

数据属性

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

• data-open： 当 popover 打开时。基于 popover 状态。
• data-placement： popover 的位置。基于 placement 属性。箭头元素基于此属性进行定位。
• data-focus： 当 popover 被焦点时。基于 useFocusRing。
• data-focus-visible： 当使用键盘对 popover 进行焦点时。基于 useFocusRing。

可访问性

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

API

Popover 属性

Popover 事件

PopoverTrigger 属性

PopoverContent 属性

Popover 类型

Popover 位置

动画属性