Dialog

Dialog 基础原型

Web Components React Vue

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

<wc-base-dialog-root class="relative inline-block">
  <wc-base-dialog-trigger class="rounded border px-3 py-1.5 cursor-pointer select-none">
    Open Dialog
  </wc-base-dialog-trigger>
  <wc-base-dialog-mask class="base-dialog-demo-mask bg-black/50"></wc-base-dialog-mask>
  <wc-base-dialog-content class="base-dialog-demo-content w-full max-w-md rounded-lg border bg-white p-6 shadow-xl">
    <wc-base-dialog-title class="text-lg font-semibold mb-2">Confirm Action</wc-base-dialog-title>
    <wc-base-dialog-description class="text-sm text-slate-600 mb-6">
      Are you sure you want to proceed? This action cannot be undone.
    </wc-base-dialog-description>
    <div class="flex gap-3 justify-end">
      <wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded border cursor-pointer select-none">Cancel</wc-base-dialog-close>
      <wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded bg-blue-600 text-white cursor-pointer select-none">Confirm</wc-base-dialog-close>
    </div>
  </wc-base-dialog-content>
</wc-base-dialog-root>

View code

Dialog 家族提供构建模态窗口的协议层基础部件。Root 持有 open 状态；本页不引入切换非模态的 modal prop。

dialog-root：持有 open 状态，并向所有子部件提供上下文。
dialog-trigger：点击时打开或切换对话框。
dialog-mask：渲染背景遮罩层，跟随 open 状态进入/离开过渡。
dialog-content：内容容器，负责焦点陷阱、浮层关闭策略（ESC、外部点击）以及进入/离开过渡。
dialog-title：语义标题，自动通过 aria-labelledby 与 content 关联。
dialog-description：语义描述，自动通过 aria-describedby 与 content 关联。
dialog-close：点击时关闭对话框。

向 dialog-root 传入 alert 可将其转换为 alert dialog：它会设置 role="alertdialog"，并禁用外部点击关闭，同时保留 ESC 关闭行为。

Draft 工作区中的 Mask 行为

工作区修订的 P-BASE-DIALOG-MASK-DEFAULT-ACTION 继续让 Content 独立拥有 focus/dismissal。participating Mask 对自身 root-scoped pointer.down 请求阻止默认动作，避免背景指针默认行为覆盖 Content 关闭时恢复的焦点；设置 passthrough=true 的 Mask 不请求这项阻止。Mask 不接管关闭、事件传播或键盘处理，也不承诺识别其内部任意缺少独立交互 owner 的原生后代。

这是 PR #777 引入的 draft 工作区行为，不是对先前发布的 0.2 包的追加保证。装饰性 Surface 可以消费已有 Transition 事实来绘制，但不能成为另一份 Dialog、焦点或关闭 owner。