#警报对话框

模式对话框，用重要内容打断用户并期望得到响应。

#用途

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

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

<button type="button" onclick="document.getElementById('demo-alert-dialog').showModal()" class="btn" data-variant="outline">Show Dialog</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">Are you absolutely sure?</h2>
      <p id="demo-alert-dialog-description">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
    </header>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" onclick="this.closest('dialog').close()">Continue</button>
    </footer>
  </div>
</dialog>

#HTML 结构

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

Trigger button. A3S UI uses the native HTMLDialogElement.showModal() method.

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

Native modal dialog. Add aria-labelledby and aria-describedby when title and description are present. Use data-size="sm" for the compact upstream size.

<div>

Dialog content surface.

<header>

Alert dialog header.

<figure> Optional

Media area for an icon or image.

<h2 id="{ TITLE_ID }">

Alert dialog title. Reference it from aria-labelledby.

<p id="{ DESCRIPTION_ID }"> Optional

Alert dialog description. Reference it from aria-describedby.

<footer>

Action area. Include a cancel action and the primary action.

#示例

#基本

带有标题、描述以及取消和继续按钮的基本警报对话框。

#媒体

Use a <figure> in the header to add a media element such as an icon or image to the alert dialog.

#破坏性

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

#小

使用 data-size="sm" 实现紧凑的警报对话框。小尺寸使媒体、标题和描述堆叠在一起，并将操作按钮集中在两列页脚中。

#RTL

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