DropdownMenu.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/dropdown-menu.tsx

功能描述

下拉菜单组件，用于显示一组操作选项。支持嵌套子菜单、复选框项、单选组、快捷键提示等功能。

导出内容

• DropdownMenu - 菜单根组件
• DropdownMenuPortal - 门户
• DropdownMenuTrigger - 触发器
• DropdownMenuContent - 菜单内容
• DropdownMenuGroup - 分组
• DropdownMenuItem - 菜单项
• DropdownMenuCheckboxItem - 复选框菜单项
• DropdownMenuRadioGroup - 单选组
• DropdownMenuRadioItem - 单选菜单项
• DropdownMenuLabel - 标签
• DropdownMenuSeparator - 分隔线
• DropdownMenuShortcut - 快捷键提示
• DropdownMenuSub - 子菜单
• DropdownMenuSubTrigger - 子菜单触发器
• DropdownMenuSubContent - 子菜单内容

Props 接口

DropdownMenuContent

属性	类型	必填	默认值	说明
sideOffset	number	否	4	与触发器的距离
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof DropdownMenuPrimitive.Content>	否	-	Content属性

DropdownMenuItem

属性	类型	必填	默认值	说明
inset	boolean	否	-	是否缩进
variant	`'default' \	'destructive'`	否	'default'	变体样式
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof DropdownMenuPrimitive.Item>	否	-	Item属性

DropdownMenuSubTrigger

属性	类型	必填	默认值	说明
inset	boolean	否	-	是否缩进
className	string	否	-	自定义CSS类名
children	React.ReactNode	是	-	子元素

依赖

• @radix-ui/react-dropdown-menu - Radix UI 下拉菜单原语
• lucide-react - 图标库
• @/lib/utils - 工具函数 (cn)

使用示例

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">打开菜单</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>我的账户</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>个人资料</DropdownMenuItem>
    <DropdownMenuItem>设置</DropdownMenuItem>
    <DropdownMenuItem disabled>企业版</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked>
      显示状态
    </DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup value="light">
      <DropdownMenuRadioItem value="light">浅色</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="dark">深色</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>