Dialog 对话框 - Docs - Artefact

Dialog 对话框

Overlays

自动交互

简介

一个覆盖式模态容器，它会暂停页面上常规的用户交互，以收集明确的输入、展示关键仪表盘工具，或请求操作确认。

Dialog 组件已作为 dialog 区块完全集成到 Page Builder 中，使内容管理者能够直接在 Sveltia CMS 中轻松定义结构触发器（例如点击操作按钮）、标题、自定义底部菜单以及模态文本内容。

水合与交互行为

Dialog 需要客户端 JavaScript 引擎来管理关键的辅助功能行为、焦点捕获和键盘控制。因此，对话框默认以水合为活动的客户端孤岛形式运行。如果需要静态、只读的展示外壳，请设置 "interactive": false 以防止加载客户端脚本资源。

JSON 属性	水合模式	描述
`"interactive": true`	交互式孤岛（默认）	完全响应式的模态框，具备焦点捕获、Esc 关闭和遮罩变暗功能。
`"interactive": false`	静态 HTML 模板	服务端渲染的静态布局外壳，无任何交互式 JavaScript 行为。

用法

以下配置精确展示了页面构建器区块条目是如何构建的。

1. 操作确认模态框

通过操作按钮触发的标准确认对话框，包含取消和接受选项。非常适合检查设置或确认项目等简单选择。

{
  "type": "dialog",
  "title": "Confirm Account Sync",
  "description": "Are you sure you want to merge workspace details?",
  "body": "This syncs configurations across devices. Unsaved local changes might be overridden.",
  "confirmText": "Synchronize",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Trigger Action Modal",
      "colorPalette": "blue"
    }
  ]
}

2. 破坏性操作警告（Alertdialog 角色）

将以下格式用于后果严重、不可逆的破坏性确认（例如删除数据库或丢弃未保存的工作）。此配置会将对话框的语义屏幕角色更改为 alertdialog。

{
  "type": "dialog",
  "role": "alertdialog",
  "title": "Destroy Database",
  "description": "You are about to permanently erase production server nodes.",
  "body": "This operation is immediate and completely irreversible. All live connections will instantly shut down.",
  "confirmText": "Erase Forever",
  "cancelText": "Keep Database",
  "trigger": [
    {
      "type": "button",
      "text": "Delete Database",
      "colorPalette": "red"
    }
  ]
}

属性

属性	CMS 字段类型	默认值	描述 / 支持选项
触发元素 (`trigger`)	`list`	-	在页面上渲染的区块条目（例如按钮或链接），点击时打开对话框。
标题 (`title`)	`string`	-	显示在对话框卡片顶部的加粗标题文本。
副标题 (`description`)	`string`	-	提供次级解释上下文的补充副标题文本。
主体内容 (`body`)	`string`	-	在卡片中部区域渲染的主要描述性文本或布局内容区块。
确认操作文本 (`confirmText`)	`string`	-	可选。主操作确认按钮的文本标签。
取消操作文本 (`cancelText`)	`string`	-	可选。关闭/取消操作按钮的文本标签。
角色类型 (`role`)	`select`	`"dialog"`	模态框的语义角色。 • `"dialog"` — 标准交互窗口。 • `"alertdialog"` — 破坏性警告。
自定义底部 (`footer`)	`list`	-	渲染在下边缘的区块列表。非常适合自定义控件或额外的按钮快捷方式。
启用水合 (`interactive`)	`boolean`	`true`	为 true 时，将组件水合为客户端孤岛，以启用遮罩、焦点捕获和 Esc 关闭。

无障碍与开发者说明

符合 Dialog (Modal) WAI-ARIA 设计模式。水合后，该组件实现了以下关键的辅助功能层：

初始焦点捕获： 打开时焦点移入对话框（首先选中取消/安全操作以避免意外触发），并在使用 Tab / Shift + Tab 滚动时保持在内部捕获状态。
背景惯性： 打开的模态容器外部的交互式元素会自动标记 HTML inert 属性，以防止屏幕阅读器或键盘控件聚焦到背景遮罩后的元素。
Esc 关闭处理： 按下 Escape 键盘按键会自动关闭活动的对话框容器（除非另行配置了 closeOnEscape）。
主体滚动锁定： 模态框处于活动状态时，文档主体滚动被冻结，并在对话框完成关闭过渡后自动恢复。

Collapsible 折叠面板

Drawer 抽屉

外观

外观

外观

外观