下拉菜单

dropdown

trigger + [data-dropdown-menu] 模板；面板 fixed 定位在 trigger 下方 4px，视口 12px margin 内 clamp，空间不足翻上。

示例

<div class="dropdown" data-dropdown>
  <button class="btn dropdown-trigger" data-dropdown-trigger aria-haspopup="menu">操作 ▾</button>
  <div data-dropdown-menu hidden>
    <div class="menu-label">文件</div>
    <button class="menu-item pressable" id="dd-rename">
      <span class="menu-item-icon"></span>
      <span class="menu-item-label">重命名</span>
      <span class="menu-item-shortcut">F2</span>
    </button>
    <button class="menu-item pressable" id="dd-share">
      <span class="menu-item-icon"></span>
      <span class="menu-item-label">分享</span>
    </button>
    <div class="menu-separator"></div>
    <button class="menu-item pressable menu-item--danger" id="dd-delete">
      <span class="menu-item-icon"></span>
      <span class="menu-item-label">删除</span>
      <span class="menu-item-shortcut">⌫</span>
    </button>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/menu.css';

用法

import { initDropdown } from '@icen.ai/ui/behaviors/dropdown';
initDropdown();
// 面板由 JS portal 到 body；click / ArrowDown 打开，↑↓ 高亮，Enter 激活，Esc / 外点 / 滚动关闭