下拉菜单

用途

A3S UI 下拉菜单相对于 .dropdown-menu 包装器内联定位。这与 shadcn/ui 的门户 Base UI 实现不同，但保持标记无依赖，并与 A3S UI 的当前弹出框/选择定位模型相匹配。

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/dropdown-menu.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/dropdown-menu.min.js" defer></script>

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

Add your dropdown menu HTML

<div id="demo-dropdown-menu" class="dropdown-menu">
  <button type="button" id="demo-dropdown-menu-trigger" aria-haspopup="menu" aria-controls="demo-dropdown-menu-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
  <div id="demo-dropdown-menu-popover" data-popover aria-hidden="true" class="w-40">
    <div role="menu" id="demo-dropdown-menu-menu" aria-labelledby="demo-dropdown-menu-trigger">
      <div role="group" aria-labelledby="demo-dropdown-account">
        <div role="heading" id="demo-dropdown-account">My Account</div>
        <div role="menuitem">
          <span>Profile</span>
          <kbd>⇧⌘P</kbd>
        </div>
        <div role="menuitem">
          <span>Billing</span>
          <kbd>⌘B</kbd>
        </div>
        <div role="menuitem">
          <span>Settings</span>
          <kbd>⌘S</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">Team</div>
        <div role="menuitem">
          <span>New Team</span>
          <kbd>⌘+T</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">GitHub</div>
        <div role="menuitem">Support</div>
        <div role="menuitem" aria-disabled="true">API</div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">
          <span>Log out</span>
          <kbd>⇧⌘Q</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

HTML 结构

<div class="dropdown-menu">

Relative wrapper for the trigger and inline menu content.

<button aria-haspopup="menu" aria-expanded="false">

Trigger button. The script toggles aria-expanded and manages keyboard navigation.

<div data-popover aria-hidden="true">

<div role="menu">

Container for menu items, groups, labels, and separators.

<div role="group" aria-labelledby="{ HEADING_ID }"> Optional: Groups related menu items.
<div role="heading" id="{ HEADING_ID }"> Optional: Group heading/label.
<div role="menuitem">: Standard action item. Use aria-disabled="true" for disabled items.
<div role="menuitemcheckbox" aria-checked="true">: Checkbox-style item. Add a child with data-indicator for the checked icon.
<div role="menuitemradio" aria-checked="true">: Radio-style item. Add a child with data-indicator for the selected icon.
<kbd> Optional: Shortcut hint aligned to the inline end of the item.
<hr role="separator"> Optional: Separator between groups or options.

JavaScript API

应用程序编程接口	类型	描述
`dropdown.open()`	方法	打开菜单。
`dropdown.close()`	方法	关闭菜单。
`dropdown.toggle()`	方法	切换菜单。
`dropdown.refresh()`	方法	在现有 `role="menu"` 元素内的子项发生更改后重新扫描菜单项。

示例

基本

快捷键

图标

复选框

复选框图标

无线电组

无线电图标

破坏性

头像

RTL

下拉菜单支持文档方向。在下拉根或父元素上设置 dir="rtl"。尽可能使用逻辑对齐数据属性。

#下拉菜单

#用途

Include CSS

Include JavaScript

Add your dropdown menu HTML

#HTML 结构

#JavaScript API

#示例

#基本

#快捷键

#图标

#复选框

#复选框图标

#无线电组

#无线电图标

#破坏性

#头像

#RTL

下拉菜单

用途

HTML 结构

JavaScript API

示例

基本

快捷键

图标

复选框

复选框图标

无线电组

无线电图标

破坏性

头像

RTL