浮层
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 走。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | 给面板起名字,供辅助技术使用。必填——popover 是一个 dialog。 | |
| showClose | boolean | false | 显示右上角的关闭控件。 |
同时接受 ComponentProps<typeof PopoverPrimitive.Content> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
再导出
Popover = PopoverPrimitive.RootRadix Popover 的根节点、触发器、锚点和关闭按钮,带类型的原样透传。
PopoverTrigger = PopoverPrimitive.TriggerPopoverAnchor = PopoverPrimitive.AnchorPopoverClose = PopoverPrimitive.Close键盘操作
| 按键 | 作用 |
|---|---|
| EnterSpace | 打开它。 |
| Tab | 像页面其他地方一样用 Tab 走过里面的内容。 |
| Escape | 关闭它,并把焦点还给触发器。 |
无障碍
- 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
- label 必填:popover 是一个 dialog,没有名字的 dialog 什么都没播报。
- 里面的内容像页面其他部分一样用 Tab 走,不像菜单那样用方向键。