Dialog

A window overlaid on the primary window, rendering the content underneath inert. Closes with the backdrop, the back gesture / key, Esc or SDialogClose.

Usage

SDialog() {
  SDialogTrigger() {
    SButton({ text: 'Edit profile', variant: 'outline' })
  }
  SDialogContent() {
    SDialogHeader() {
      SDialogTitle({ text: 'Edit profile' })
      SDialogDescription({ text: 'Make changes to your profile here.' })
    }
    TextInput({ text: this.name })
    SDialogFooter() {
      SDialogClose() { SButton({ text: 'Cancel', variant: 'outline' }) }
      SDialogClose() { SButton({ text: 'Save changes' }) }
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind open state with !! like v-model:open.

@Local open: boolean = false;

SButton({ text: 'Open' }).onClick(() => this.open = true)
SDialog({ open: this.open!! }) {
  SDialogContent() { ... }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SDialog

shadcn-vue Dialog.

Prop	Type	Default	Description
open!!	boolean | undefined	undefined	Controlled open state (use with !!). Leave undefined for uncontrolled.
defaultOpen	boolean	false

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

Slots: children (trailing closure)

SDialogTrigger

Opens the dialog when its content is tapped.

Slots: children (trailing closure)

SDialogClose

Closes the dialog when its content is tapped (works inside the dialog content).

Slots: children (trailing closure)

SDialogContent

The dialog panel. Renders nothing in place; while open it is shown in an overlay layer.

• pointer / wide screens: centred bg-background rounded-lg border p-6 shadow-lg sm:max-w-lg
• touch + compact window (adaptive: 'auto'): bottom Drawer with a drag handle (semantic translation)

Prop	Type	Default	Description
showCloseButton	boolean	true
dismissOnOutside	boolean	true	Close when tapping the backdrop.
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'	'auto': Drawer on compact touch screens, centred dialog otherwise.
tokens	SparkSurfaceTokens	{}	Per-instance surface token overrides (instance → theme tokens → recipe), see {@link SparkSurfaceTokens}.

Slots: children (trailing closure)

SDialogHeader

Slots: children (trailing closure)

SDialogFooter

Actions row; stacks vertically (primary on top) on compact width, like shadcn's flex-col-reverse sm:flex-row.

Slots: children (trailing closure)

SDialogTitle

Prop	Type	Default	Description
text	ResourceStr	''

SDialogDescription

Prop	Type	Default	Description
text	ResourceStr	''