Popover

在触发器附近展示补充内容或操作，支持不同尺寸与触发方式，适合快捷操作和轻量交互面板。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于与触发锚点相关的浮层内容。短文本提示用 Tooltip，需要对话框焦点流程用 Dialog；关闭行为使用公开 closeOn。

as="popover" 放在触发宿主内可自动关联锚点；静态模式可用 bind:open 手动控制。
trigger 控制触发方式，closeOn 控制关闭策略；需要持续显示的交互示例可设置 closeOn="manual"。

导入

import { Popover } from '@snowui-design-system/components';

用法

触发方式

尺寸

位置

手动关闭

共享内容

API 参考

属性	类型	默认值	示例	描述
`id`	`string`	`—`	`id="shared-component-actions"`	模版模式的唯一标识
`template`	`boolean`	`false`	`<Popover template id="shared-component-actions">…</Popover>`	模版模式;不直接渲染,通过 `showPopover(id)` 激活
`size`	`PopoverSize`	`"sm"`	`size={value}`	尺寸档位
`trigger`	`PopoverTrigger`	`"click"`	`trigger={value}`	触发方式;模版模式生效
`placement`	`PopoverPlacement`	`"bottom"`	`placement={value}`	优先弹出方位,视口空间不足时自动翻转
`offset`	`number`	`8`	`offset={42}`	浮层与触发器距离,单位 px
`closeOn`	`PopoverCloseMode`	`"outside"`	`closeOn={value}`	关闭方式:`outside` 点击空白关闭,`manual` 仅由 Popover 内按钮关闭
`closeOnEscape`	`boolean`	`true`	`closeOnEscape`	Escape 是否关闭;两种 closeOn 模式都默认支持
`closeOnSelect`	`boolean`	`—`	`closeOnSelect`	点击内部 `MenuItem` 是否关闭;单个 `MenuItem closeOnSelect` 可覆盖默认行为：`true` (sm) / `false` (md/lg)。
`continuousHover`	`boolean`	`true`	`continuousHover`	直接 `MenuItem` 之间是否使用容器级连续 hover 背景
`open`	`boolean`	`true`	`open`	静态模式手动控制显示,支持 `bind:open`
`onOpenChange`	`(open: boolean) => void`	`—`	`onOpenChange={(open) => menuOpen = open}`	打开状态变化回调
`as`	`"popover" \| undefined`	`—`	`<Button>Actions<Popover as="popover">…</Popover></Button>`	`as="popover"` 启用内嵌模式:自动发现宿主父元素为 anchor 和触发源
`children`	`Snippet`	`—`	`<Popover><MenuItem as="item">Copy import</MenuItem></Popover>`	面板内容