跳到正文
GitHub

浮层

Popover

锚在控件上的面板,里面装可以交互的内容。

什么时候用它

任何带链接、字段或按钮的东西。tooltip 描述而不能被进入——把控件放进 tooltip,它就再也够不到了。

示例

default

说明

Radix Popover 的根节点、触发器、锚点和关闭按钮,带类型的原样透传。

属性

这个组件没有自己的属性。

组成部分

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

PopoverContent

锚在某个控件上的面板,里面装着读者可以交互的内容。

Tooltip 的分界线不是视觉上的,是行为上的:tooltip 是描述,进不去;popover 装的是你能 Tab 进去的东西。任何带链接、字段或按钮的内容都属于 popover,把它放进 tooltip 会让它够不着——焦点刚要移进去,tooltip 就关了。

DropdownMenu 的分界:菜单是一串带菜单语义、用方向键导航的动作。popover 是自由格式的,里面的内容像页面其他地方一样用 Tab 走。

PopoverContent props
属性类型默认值说明
label必填string给面板起名字,供辅助技术使用。必填——popover 是一个 dialog。
showClosebooleanfalse显示右上角的关闭控件。

同时接受 ComponentProps<typeof PopoverPrimitive.Content> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

再导出

Popover = PopoverPrimitive.Root

Radix Popover 的根节点、触发器、锚点和关闭按钮,带类型的原样透传。

PopoverTrigger = PopoverPrimitive.Trigger
PopoverAnchor = PopoverPrimitive.Anchor
PopoverClose = PopoverPrimitive.Close

键盘操作

Popover keyboard interactions
按键作用
EnterSpace打开它。
Tab像页面其他地方一样用 Tab 走过里面的内容。
Escape关闭它,并把焦点还给触发器。

无障碍

  • 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
  • label 必填:popover 是一个 dialog,没有名字的 dialog 什么都没播报。
  • 里面的内容像页面其他部分一样用 Tab 走,不像菜单那样用方向键。