Popover

Popover 用于在触发元素附近展示可交互浮层。组件基于 Radix Popover 封装，提供触发器、内容容器、Portal、箭头、关闭按钮、受控状态和定位能力。

import {
  Popover,
  PopoverAnchor,
  PopoverArrow,
  PopoverContent,
  PopoverRoot,
  PopoverTrigger
} from '@skyroc/web-ui';

何时使用

• 需要点击按钮、图标或文本后展示一块可交互内容。
• 浮层里需要放置表单、筛选项、快捷设置或简短操作。
• 内容和触发元素关系明确，但不需要阻断页面流程。
• 只展示悬停信息时使用 HoverCard 或 Tooltip；需要强确认或复杂流程时使用 Dialog。

基础用法

通过 trigger 提供触发元素，children 作为浮层内容。默认内容会通过 Portal 渲染，并带有边框、阴影和进入/退出动画。

<Popover trigger={<Button>Open Popover</Button>}>
  <div>Popover content</div>
</Popover>

位置与箭头

通过 side 控制浮层位置，通过 showArrow 显示指向触发元素的箭头。side、align、sideOffset 等定位属性会传递给内容容器。

<Popover
  showArrow
  side="right"
  sideOffset={8}
  trigger={<Button>Open</Button>}
>
  <div>Content</div>
</Popover>

受控状态

通过 open 和 onOpenChange 控制打开状态；非受控模式使用 defaultOpen。

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen} trigger={<Button>Open</Button>} />

关闭按钮

通过 closeIcon 放置自定义关闭元素。该元素会通过 Radix Close asChild 绑定关闭行为。

<Popover
  closeIcon={<Button variant="ghost">Close</Button>}
  trigger={<Button>Open</Button>}
>
  <div>Closable content</div>
</Popover>

尺寸

通过 size 调整内容区 padding、字号和箭头尺寸，从 xs 到 2xl 共 6 个尺寸。

API

Popover

通用属性参考：组合 Radix Popover Root、Portal 和 Content，并提供高层 trigger、closeIcon、showArrow 封装。

结构组件

Popover 同时导出 Radix 风格结构组件，适合需要完全手动组织 Root、Trigger、Content 和 Portal 时使用。

类型