抽屉

用途

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/drawer.css";
@import "@a3s-lab/ui/styles/a3s.css";

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

Include JavaScript

复制或提供完整的 A3S UI JavaScript 包。

<script src="/assets/js/all.min.js" defer></script>

或者复制或提供A3S UI运行时和抽屉脚本。

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/drawer.min.js" defer></script>

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

Add your drawer HTML

A3S UI maps shadcn/ui's Vaul Drawer to a native <dialog> element. This keeps modality, focus handling, and inert page content in the browser platform. The Drawer script adds safe backdrop-click close and lets the exit animation finish before calling the native close. Drag gestures, snap points, and the drag handle are intentionally not included.

<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('demo-drawer').showModal()">Open Drawer</button>
<dialog id="demo-drawer" class="drawer" aria-labelledby="demo-drawer-title" aria-describedby="demo-drawer-description">
  <article>
    <header class="mx-auto w-full max-w-sm">
      <h2 id="demo-drawer-title">Move Goal</h2>
      <p id="demo-drawer-description">Set your daily activity goal.</p>
    </header>
    <section class="px-4">
      <div class="mx-auto w-full max-w-sm">
        <div class="flex items-center justify-center gap-6">
          <button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Decrease">...</button>
          <div class="text-center">
            <div class="text-7xl font-bold">350</div>
            <div class="text-muted-foreground text-xs uppercase">Calories/day</div>
          </div>
          <button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Increase">...</button>
        </div>
      </div>
    </section>
    <footer class="mx-auto w-full max-w-sm">
      <button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
      <button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
    </footer>
  </article>
</dialog>

HTML 结构

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

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

<dialog class="drawer" data-side="bottom|top|left|right">

Native modal drawer. Omit data-side for the default bottom drawer. Add aria-labelledby and aria-describedby when title and description are present. JavaScript adds the data-drawer-initialized flag and manages animated close behavior.

<article>

Drawer content surface.

<header> Optional: Drawer header with a title and optional description.
<section> Optional: Scrollable body/content area.
<footer> Optional: Action area pinned after the drawer body.

示例

侧面

使用data-side设置视口一侧。可用值为 top、right、bottom 和 left。

可滚动内容

当抽屉主体滚动时，保持操作可见。

RTL

抽屉侧面是物理视口侧面。内容间距和文本对齐遵循文档方向。

#抽屉

#用途

Include CSS

Include JavaScript

Add your drawer HTML

#HTML 结构

#示例

#侧面

#可滚动内容

#RTL

抽屉

用途

HTML 结构

示例

侧面

可滚动内容

RTL