Dialog

Dialog 基础原型

<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 家族提供构建模态与非模态对话框的协议层基础部件。

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

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