Dialog 对话框

覆盖在主窗口之上的窗口，使下方内容不可交互。可通过点击遮罩、返回手势 / 返回键、Esc 或 SDialogClose 关闭。

基础用法

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' }) }
    }
  }
}

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

受控

像 v-model:open 一样用 !! 绑定打开状态。

@Local open: boolean = false;

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

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

API

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

SDialog

shadcn-vue 的 Dialog。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined	受控的展开状态（配合 !! 使用）。留空则为非受控。
defaultOpen	boolean	false

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

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

SDialogTrigger

点按内容区时打开对话框。

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

SDialogClose

点按内容区时关闭对话框（在对话框内容中同样有效）。

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

SDialogContent

对话框面板。原位不渲染任何内容；打开时显示在浮层中。

• 指针 / 宽屏：居中的 bg-background rounded-lg border p-6 shadow-lg sm:max-w-lg
• 触控 + 紧凑窗口（adaptive: 'auto'）：带拖动手柄的底部 Drawer（语义上的转换）

属性	类型	默认值	说明
showCloseButton	boolean	true
dismissOnOutside	boolean	true	点击遮罩时关闭。
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'	'auto'：紧凑的触控屏上使用 Drawer，其他情况下使用居中对话框。
tokens	SparkSurfaceTokens	{}	实例级表面令牌覆盖（实例 → 主题令牌 → 配方），参见 {@link SparkSurfaceTokens}。

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

SDialogHeader

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

SDialogFooter

操作行；在紧凑宽度下纵向堆叠（主操作在上），与 shadcn 的 flex-col-reverse sm:flex-row 一致。

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

SDialogTitle

属性	类型	默认值	说明
text	ResourceStr	''

SDialogDescription

属性	类型	默认值	说明
text	ResourceStr	''