ContextMenu.tsx

ContextMenu.tsx

基本信息

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

功能描述

右键上下文菜单组件，用于在元素上右键点击时显示操作选项。支持嵌套子菜单、复选框项、单选组等功能。

导出内容

  • ContextMenu - 菜单根组件
  • ContextMenuTrigger - 触发区域
  • ContextMenuContent - 菜单内容
  • ContextMenuItem - 菜单项
  • ContextMenuCheckboxItem - 复选框菜单项
  • ContextMenuRadioItem - 单选菜单项
  • ContextMenuRadioGroup - 单选组
  • ContextMenuLabel - 标签
  • ContextMenuSeparator - 分隔线
  • ContextMenuShortcut - 快捷键提示
  • ContextMenuGroup - 分组
  • ContextMenuPortal - 门户
  • ContextMenuSub - 子菜单
  • ContextMenuSubContent - 子菜单内容
  • ContextMenuSubTrigger - 子菜单触发器

Props 接口

ContextMenuItem

属性类型必填默认值说明
insetboolean否-是否缩进
variant`'default' \'destructive'`否'default'变体样式
classNamestring否-自定义CSS类名
...propsReact.ComponentProps<typeof ContextMenuPrimitive.Item>否-菜单项属性

ContextMenuSubTrigger

属性类型必填默认值说明
insetboolean否-是否缩进
classNamestring否-自定义CSS类名
...propsReact.ComponentProps<typeof ContextMenuPrimitive.SubTrigger>否-子菜单触发器属性

ContextMenuLabel

属性类型必填默认值说明
insetboolean否-是否缩进
classNamestring否-自定义CSS类名

依赖

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

使用示例

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuCheckboxItem,
} from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    右键点击这里
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>操作</ContextMenuLabel>
    <ContextMenuItem>复制</ContextMenuItem>
    <ContextMenuItem>粘贴</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>更多操作</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>重命名</ContextMenuItem>
        <ContextMenuItem>删除</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      显示预览
    </ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>
← 返回目录