对话框

用途

Include 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";

使用CDN或批量程序导入？请参见安装页。

Add your dialog HTML

A3S UI uses the native <dialog> element and showModal(). This differs from shadcn/ui's portalled Base UI implementation, but preserves native modality, focus handling, and inert page content without component JavaScript.

<button type="button" onclick="document.getElementById('demo-dialog-edit-profile').showModal()" class="btn" data-variant="outline">Open Dialog</button>
<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onclick="if (event.target === this) this.close()">
  <div class="sm:max-w-sm">
    <header>
      <h2 id="demo-dialog-edit-profile-title">Edit profile</h2>
      <p id="demo-dialog-edit-profile-description">Make changes to your profile here. Click save when you're done.</p>
    </header>
    <section>
      <form class="grid gap-4">
        <div class="grid gap-3">
          <label class="label" for="demo-dialog-edit-profile-name">Name</label>
          <input class="input" type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" autofocus />
        </div>
        <div class="grid gap-3">
          <label class="label" for="demo-dialog-edit-profile-username">Username</label>
          <input class="input" type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
        </div>
      </form>
    </section>
    <footer>
      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="btn" onclick="this.closest('dialog').close()">Save changes</button>
    </footer>
    <button type="button" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close dialog" onclick="this.closest('dialog').close()"><svg 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" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></button>
  </div>
</dialog>

HTML 结构

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

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

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

Native modal dialog. Add aria-labelledby="{ TITLE_ID }" and aria-describedby="{ DESCRIPTION_ID }" when title and description are present. Add width utilities to the inner <div> when a dialog needs a custom size. The macro also adds backdrop-click close handling.

<div>

Dialog content surface.

<header> Optional

Dialog header.

<h2 id="{ TITLE_ID }">: Dialog title. Reference it from aria-labelledby.
<p id="{ DESCRIPTION_ID }"> Optional: Dialog description. Reference it from aria-describedby.

<section> Optional

Dialog body/content area. Add overflow utilities when the body should scroll.

<footer> Optional

Action area. It stacks actions on small screens and aligns them to the end on larger screens.

<button type="button" onclick="this.closest('dialog').close()"> Optional

Close button. You can also wrap a button in <form method="dialog">.

示例

自定义关闭按钮

无关闭按钮

粘页脚

可滚动内容

RTL

对话框定位和关闭按钮放置使用逻辑属性。在对话框或父元素上设置 dir="rtl"。

对话框

Edit profile

用途

Include CSS

Add your dialog HTML

HTML 结构

示例

自定义关闭按钮

Share link

无关闭按钮

No Close Button

粘页脚

Sticky Footer

可滚动内容

Scrollable Content

RTL

تعديل الملف الشخصي

#对话框

#用途

Include CSS

Add your dialog HTML

#HTML 结构

#示例

#自定义关闭按钮

#无关闭按钮

#粘页脚

#可滚动内容

#RTL

对话框

用途

HTML 结构

示例

自定义关闭按钮

无关闭按钮

粘页脚

可滚动内容

RTL