ElyriPopover
弹出层：点击触发，内容可交互，自动定位并支持翻转，外部点击或 Escape 关闭后把焦点还给触发元素。
安装
添加组件
pnpm dlx @elyri/cli@latest add popover示例
基础用法
点击触发，浮层内可放置标题与说明等可交互内容。
import { Popover } from './components/elyri/Popover';
export function Example() {
return (
<Popover>
<Popover.Trigger>Open popover</Popover.Trigger>
<Popover.Content>
<div className="demo-ui-popover-title">Popover title</div>
<p className="demo-ui-popover-text">
Popovers hold interactive content, move focus inside and return it to the trigger on close.
</p>
</Popover.Content>
</Popover>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
open | boolean | — | 受控开关 |
defaultOpen | boolean | false | 非受控初始开关 |
onOpenChange | (open: boolean) => void | — | 开关变化回调 |
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | 期望方向：top / bottom / left / right |
align | 'start' | 'center' | 'end' | 'center' | 交叉轴对齐：start / center / end |
offset | number | 8 | 与触发元素的间距 |
Popover.Trigger | ButtonHTMLAttributes | — | 触发按钮，负责开关与 aria 关联 |
Popover.Content | HTMLAttributes | — | 浮层内容，role="dialog"，可交互 |
closeOnInteractOutside | boolean | true | 点击外部关闭，默认 true |
closeOnEscape | boolean | true | 按 Escape 关闭，默认 true |