Popover 弹出框

在浮层中显示富内容，锚定在触发器上。会自动翻转与平移以保持在屏幕内。

基础用法

SPopover() {
  SPopoverTrigger() {
    SButton({ text: 'Open popover', variant: 'outline' })
  }
  SPopoverContent({ side: 'bottom', alignment: 'start' }) {
    Text('Dimensions')
    TextInput({ placeholder: 'Width' })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

方位

side：top | right | bottom | left

SPopoverContent({ side: 'top' }) { ... }

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SPopover

shadcn-vue 的 Popover。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }

插槽: 子组件（尾随闭包）

SPopoverTrigger

切换弹出框的显示；其边界即为锚点。

插槽: 子组件（尾随闭包）

SPopoverClose

点按时关闭弹出框。

插槽: 子组件（尾随闭包）

SPopoverContent

锚定面板：bg-popover w-72 rounded-md border p-4 shadow-md，会翻转或偏移以保持在屏幕内。

属性	类型	默认值	说明
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'center'
sideOffset	number	4
alignOffset	number	0
panelWidth	number	288	面板宽度，单位 vp（shadcn 的 w-72 = 288）。
tokens	SparkSurfaceTokens	{}	实例级表面令牌覆盖（实例 → 主题令牌 → 配方），参见 {@link SparkSurfaceTokens}。

插槽: 子组件（尾随闭包）