下拉菜单 DropdownMenu

这是基于 @radix-ui/react-dropdown-menu 封装的 React 组件库，使用了 Tailwind CSS 风格，支持多种菜单交互，如子菜单、选择项、复选框、单选框等。

---

📦 引入方式

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@itera-web/react-ui-dropdownmenu';

---

🧩 使用示例

示例

源码

<DropdownMenu>
  <DropdownMenuTrigger>
    <button className="btn">打开菜单</button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>编辑</DropdownMenuItem>
    <DropdownMenuItem>复制</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>删除</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

---

📦 组件 API

组件名	描述
DropdownMenu	根组件，包裹整个菜单逻辑
DropdownMenuTrigger	菜单的触发器，通常是按钮或图标
DropdownMenuContent	菜单内容容器，支持动画和自定义位置
DropdownMenuItem	普通菜单项，可点击，支持内边距 (inset) 和禁用状态
DropdownMenuCheckboxItem	带复选框的菜单项，适合布尔状态切换
DropdownMenuRadioGroup	单选菜单项的分组容器
DropdownMenuRadioItem	单选项，与 DropdownMenuRadioGroup 配合使用
DropdownMenuSub	子菜单容器，用于嵌套结构
DropdownMenuSubTrigger	触发子菜单的元素
DropdownMenuSubContent	子菜单内容容器
DropdownMenuLabel	菜单项的分组标题或标签，支持 inset
DropdownMenuSeparator	菜单项之间的分隔线
DropdownMenuGroup	逻辑分组容器，不影响样式
DropdownMenuShortcut	显示快捷键提示的区域

---

📁 依赖项

• @radix-ui/react-dropdown-menu
• Tailwind CSS（或其他兼容的 utility-first CSS 工具）
• cn 工具函数（通常为 clsx 或 classnames 封装）