Skip to content

Popover 气泡卡片

点击/悬停弹出气泡卡片。

示例

API

属性说明类型默认值
trigger触发元素ReactNode-
content卡片内容ReactNode-
open是否显示boolean-
defaultOpen默认显示boolean-
onOpen打开回调() => void-
onClose关闭回调() => void-

可访问性

Popover 的触发按钮会通过 aria-expanded 表示展开状态,并通过 aria-haspopup="dialog" 表达会打开一个对话式气泡卡片。气泡打开后,触发按钮会通过 aria-controls 关联当前弹层;关闭时不会保留指向不存在节点的关联。

弹层会以 role="dialog" 暴露,并默认使用 Popover content 作为可访问名称。可以在 Popover 上传入 aria-label 覆盖弹层名称。打开后可按 Escape 关闭,并将焦点返回触发按钮;也可以点击弹层外部关闭,弹层内部交互不会触发外部关闭。