Popover

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

安装

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

导入

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

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

用法

带箭头

颜色

位置

偏移

受控

标题属性

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

带表单

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

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

背景幕布

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

自定义动画

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

了解更多关于 Framer motion variants 的信息 这里。

自定义触发器

插槽

• 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 打开时，辅助技术会隐藏 popover 外部的内容。
• 当在外部交互或按下 Escape 键时，popover 会关闭。
• 焦点在挂载时移动到 popover 中，并在卸载时恢复到触发器元素。
• Popover 相对于触发器元素定位，并自动翻转和调整以避免与浏览器窗口边缘重叠。
• 在 popover 外部阻止滚动以避免意外地重新定位或关闭它。

API

Popover 属性

Popover 事件

PopoverTrigger 属性

PopoverContent 属性

Popover 类型

Popover 放置

动画属性