Popover

Displays rich content in a portal, anchored to its trigger. Flips and shifts to stay on screen.

Usage

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

Approximate web preview — the HarmonyOS rendering is the reference.

Side

side: top | right | bottom | left

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

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SPopover

shadcn-vue Popover.

Prop	Type	Default	Description
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SPopoverTrigger

Toggles the popover; its bounds are the anchor.

Slots: children (trailing closure)

SPopoverClose

Closes the popover when tapped.

Slots: children (trailing closure)

SPopoverContent

Anchored panel: bg-popover w-72 rounded-md border p-4 shadow-md, flips / shifts to stay on screen.

Prop	Type	Default	Description
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'center'
sideOffset	number	4
alignOffset	number	0
panelWidth	number	288	Panel width in vp (shadcn w-72 = 288).
tokens	SparkSurfaceTokens	{}	Per-instance surface token overrides (instance → theme tokens → recipe), see {@link SparkSurfaceTokens}.

Slots: children (trailing closure)