For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/components/dropdown-menu.md.
A3S UI
  • 简体中文
  • v0.4.1

      • 下拉菜单

      下拉菜单把与触发器相关的一组离散操作收纳在临时浮层中，适合低频次级命令。

      实时预览

      用法

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

      引入 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或批量程序导入？请参见安装页。

      引入 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或批量程序导入？请参见安装页。

      添加下拉菜单 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">打开账户菜单</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">我的账户</div>
        <div role="menuitem">
          <span>个人资料</span>
          <kbd>⇧⌘P</kbd>
        </div>
        <div role="menuitem">
          <span>账单</span>
          <kbd>⌘B</kbd>
        </div>
        <div role="menuitem">
          <span>设置</span>
          <kbd>⌘S</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">团队</div>
        <div role="menuitem">
          <span>新建团队</span>
          <kbd>⌘+T</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">GitHub</div>
        <div role="menuitem">帮助与支持</div>
        <div role="menuitem" aria-disabled="true">API</div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">
          <span>退出登录</span>
          <kbd>⇧⌘Q</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

      HTML 结构

      <div class="dropdown-menu">

      触发器与内联菜单内容的相对定位容器。

      <button aria-haspopup="menu" aria-expanded="false">
      触发按钮。脚本负责切换 aria-expanded 并管理键盘导航。
      <div data-popover aria-hidden="true">

      菜单浮层。使用 data-side="top|right|bottom|left|inline-start|inline-end" 和 data-align="start|center|end" 控制位置。共享运行时会在可视视口内自动翻转、约束并重新定位浮层。

      <div role="menu">

      菜单项、分组、标题和分隔线的容器。

      <div role="group" aria-labelledby="{ HEADING_ID }"> 可选
      对相关菜单项进行分组。
      <div role="heading" id="{ HEADING_ID }"> 可选
      分组标题或标签。
      <div role="menuitem">
      标准操作项。禁用时使用 aria-disabled="true"。
      <div role="menuitemcheckbox" aria-checked="true">
      复选菜单项。使用带 data-indicator 的子元素显示选中图标。
      <div role="menuitemradio" aria-checked="true">
      单选菜单项。使用带 data-indicator 的子元素显示选中图标。
      <kbd> 可选
      与菜单项行尾对齐的快捷键提示。
      <hr role="separator"> 可选
      分组或选项之间的分隔线。

      JavaScript API

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

      React 的 useDropdownMenu 与 Vue 的同名 composable 通过 call() 暴露这四个方法。

      示例

      基本

      实时预览

      快捷键

      实时预览

      图标

      实时预览

      复选框

      实时预览

      复选框图标

      实时预览

      单选项组

      实时预览

      单选状态标记

      实时预览

      破坏性

      实时预览

      头像

      实时预览

      RTL

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

      实时预览