Popover | Pingo

Popover 在触发器旁边打开一个浮动面板，页面滚动时面板保持锚定。下方预览由 pingo 引擎实时渲染——点击触发器即可开合，并跟随站点主题切换明暗。

用法

import { Button, Popover, PopoverContent, PopoverTrigger } from "@dopejs/pingo-ui";

root.render(
  <Popover defaultOpen={false} onOpenChange={(open) => {}}>
    <PopoverTrigger>
      <Button onPress={() => {}}>打开浮层</Button>
    </PopoverTrigger>
    <PopoverContent>
      <text value="任意内容" />
    </PopoverContent>
  </Popover>,
);

PopoverTrigger 与 PopoverContent 通过 context 读取根组件状态，必须作为同一个 Popover 的子节点。默认非受控（defaultOpen），传入 open 即切换为受控模式。面板默认锚定在触发器下方；开启布局回读后，空间不足时会自动翻转到另一侧。

示例

任意内容

PopoverContent 的 children 接受任意 PingoNode，可以放表单、列表或排版内容。

Props

Prop	类型	默认值	说明
`open`	`boolean`	—	受控开合状态
`defaultOpen`	`boolean`	`false`	非受控初始开合
`onOpenChange`	`(open: boolean) => void`	—	开合变化回调
`children`	`PingoNode`	—	Trigger 与 Content（必填）
`className`	`string`	—	追加在锚点容器类名之后

PopoverTrigger

Prop	类型	默认值	说明
`children`	`PingoNode`	—	触发元素（必填）
`className`	`string`	—	追加类名

PopoverContent

Prop	类型	默认值	说明
`children`	`PingoNode`	—	面板内容（必填）
`className`	`string`	—	追加类名

无障碍

触发器具备 button 语义并暴露 expanded/collapsed 状态；Escape 关闭面板并把焦点交还触发器。