警报对话框

警报对话框要求用户在高风险或不可逆操作前做出明确选择；只有缺少响应就无法安全继续时才使用。

安装Terminal

npm install @a3s-lab/ui@0.4.0

<button type="button" onclick="document.getElementById('demo-alert-dialog').showModal()" class="btn" data-variant="outline">删除账户</button>
<dialog id="demo-alert-dialog" class="alert-dialog" aria-labelledby="demo-alert-dialog-title" aria-describedby="demo-alert-dialog-description">
  <div>
    <header>
      <h2 id="demo-alert-dialog-title">确认删除账户？</h2>
      <p id="demo-alert-dialog-description">账户、项目和历史记录将被永久删除，且无法恢复。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">取消</button>
      <button class="btn" data-variant="destructive" onclick="this.closest('dialog').close('confirm')">删除账户</button>
    </footer>
  </div>
</dialog>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者仅导入基础 CSS、对话框组件 CSS 和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/dialog.css";
@import "@a3s-lab/ui/styles/a3s.css";

警报对话框复用对话框组件 CSS，不需要额外样式文件。

使用 CDN 或包管理器集成时，请参见安装页。

添加警报对话框 HTML

警报对话框使用原生 <dialog class="alert-dialog">。当用户必须明确选择才能安全继续时，不提供右上角关闭按钮，也不允许点击背景关闭。

<button type="button" onclick="document.getElementById('demo-alert-dialog').showModal()" class="btn" data-variant="outline">删除账户</button>
<dialog id="demo-alert-dialog" class="alert-dialog" aria-labelledby="demo-alert-dialog-title" aria-describedby="demo-alert-dialog-description">
  <div>
    <header>
      <h2 id="demo-alert-dialog-title">确认删除账户？</h2>
      <p id="demo-alert-dialog-description">账户、项目和历史记录将被永久删除，且无法恢复。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">取消</button>
      <button class="btn" data-variant="destructive" onclick="this.closest('dialog').close('confirm')">删除账户</button>
    </footer>
  </div>
</dialog>

HTML 结构

<button type="button" onclick="dialog.showModal()"> 可选

触发按钮。使用原生 HTMLDialogElement.showModal() 打开模态对话框。

<dialog class="alert-dialog" id="{ DIALOG_ID }">

原生模态对话框。存在标题和说明时，分别通过 aria-labelledby 与 aria-describedby 建立关系；紧凑布局使用 data-size="sm"。

<div>

对话框内容表面。

<header>

警报对话框标题区。

<figure> 可选: 用于解释风险类型的图标或图片，不能替代标题。
<h2 id="{ TITLE_ID }">: 警报标题，由 aria-labelledby 引用。
<p id="{ DESCRIPTION_ID }"> 可选: 结果与恢复说明，由 aria-describedby 引用。

<footer>

操作区。至少提供安全退出操作和明确命名的确认操作。

JavaScript API

警报对话框保留原生 HTMLDialogElement 契约。React 与 Vue 的 useAlertDialog 可调用 showModal() 和 close(returnValue)；cancel 与 close 仍是原生 DOM 事件。

状态与变体

基本

基础警报必须说明继续操作的具体后果，并提供安全退出路径。

<button type="button" onclick="document.getElementById('alert-dialog-basic').showModal()" class="btn" data-variant="outline">离开编辑器</button>
<dialog id="alert-dialog-basic" class="alert-dialog" aria-labelledby="alert-dialog-basic-title" aria-describedby="alert-dialog-basic-description">
  <div>
    <header>
      <h2 id="alert-dialog-basic-title">放弃未保存的更改？</h2>
      <p id="alert-dialog-basic-description">离开后，本次编辑的 6 项配置更改将丢失。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">继续编辑</button>
      <button class="btn" onclick="this.closest('dialog').close('confirm')">放弃更改</button>
    </footer>
  </div>
</dialog>

媒体

只有当图标能帮助识别风险类型时，才在标题区使用 <figure>；图标不应成为装饰。

<button type="button" onclick="document.getElementById('alert-dialog-media').showModal()" class="btn" data-variant="outline">轮换生产密钥</button>
<dialog id="alert-dialog-media" class="alert-dialog" aria-labelledby="alert-dialog-media-title" aria-describedby="alert-dialog-media-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-circle-fading-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 7.38 16.75" /><path d="M12 8v8" /><path d="M16 12H8" /><path d="M2.5 8.88a10 10 0 0 0 0 6.24" /><path d="M4.64 4.64a10 10 0 0 0 0 14.72" /></svg></figure>
      <h2 id="alert-dialog-media-title">立即轮换生产密钥？</h2>
      <p id="alert-dialog-media-description">旧密钥会立刻失效。尚未更新的调用方将无法连接。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">暂不轮换</button>
      <button class="btn" onclick="this.closest('dialog').close('confirm')">确认轮换</button>
    </footer>
  </div>
</dialog>

破坏性

当警报对话框确认破坏性操作时，使用破坏性操作按钮。

<button type="button" onclick="document.getElementById('alert-dialog-destructive').showModal()" class="btn" data-variant="destructive">删除运行记录</button>
<dialog id="alert-dialog-destructive" class="alert-dialog" aria-labelledby="alert-dialog-destructive-title" aria-describedby="alert-dialog-destructive-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-trash-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg></figure>
      <h2 id="alert-dialog-destructive-title">永久删除运行记录？</h2>
      <p id="alert-dialog-destructive-description">日志、证据和关联产物索引都将被删除，且无法恢复。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">取消</button>
      <button class="btn" data-variant="destructive" onclick="this.closest('dialog').close('confirm')">删除记录</button>
    </footer>
  </div>
</dialog>

小

使用 data-size="sm" 处理文案短、选择明确的阻塞操作。复杂影响或需要补充输入的任务不应塞进紧凑对话框。

<button type="button" onclick="document.getElementById('alert-dialog-small').showModal()" class="btn" data-variant="outline">停止任务</button>
<dialog id="alert-dialog-small" class="alert-dialog" data-size="sm" aria-labelledby="alert-dialog-small-title" aria-describedby="alert-dialog-small-description">
  <div>
    <header>
      <figure><svg class="lucide lucide-users" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg></figure>
      <h2 id="alert-dialog-small-title">停止正在运行的任务？</h2>
      <p id="alert-dialog-small-description">当前步骤会取消，已完成的变更仍会保留。</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close('cancel')">继续运行</button>
      <button class="btn" onclick="this.closest('dialog').close('confirm')">停止任务</button>
    </footer>
  </div>
</dialog>

RTL

警报对话框支持文档方向。在对话框或父元素上设置 dir="rtl"。

<div dir="rtl">
  <button type="button" onclick="document.getElementById('alert-dialog-rtl').showModal()" class="btn" data-variant="outline">إظهار الحوار</button>
  <dialog id="alert-dialog-rtl" class="alert-dialog" aria-labelledby="alert-dialog-rtl-title" aria-describedby="alert-dialog-rtl-description">
    <div>
      <header>
        <h2 id="alert-dialog-rtl-title">هل أنت متأكد تماماً؟</h2>
        <p id="alert-dialog-rtl-description">لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائياً وإزالة بياناتك من خوادمنا.</p>
      </header>
      <footer>
        <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">إلغاء</button>
        <button class="btn" onclick="this.closest('dialog').close()">متابعة</button>
      </footer>
    </div>
  </dialog>
</div>

可访问性

标题必须准确命名决策，说明必须写明继续操作的影响以及是否可恢复，并通过 aria-labelledby、aria-describedby 与对话框关联。打开后把焦点放在最安全、最可预测的操作上；关闭后归还给原触发器。保留原生 Escape 与焦点约束，但当缺少明确选择就无法安全继续时，应拦截 cancel，且不能允许背景点击关闭。确认按钮使用动词和对象命名，不能只写“继续”。

#警报对话框

#用法

引入 CSS

添加警报对话框 HTML

#HTML 结构

#JavaScript API

#状态与变体

#基本

#媒体

#破坏性

#小

#RTL

#可访问性

警报对话框

用法

HTML 结构

JavaScript API

状态与变体

基本

媒体

破坏性

小

RTL

可访问性