上下文菜单

显示通过右键点击触发的操作菜单。

import {
  ContextMenu,
  ContextMenuCheckboxItem,

安装


pnpm dlx shadcn@latest add context-menu

用法

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>在此处右键点击</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>个人资料</ContextMenuItem>
    <ContextMenuItem>账单</ContextMenuItem>
    <ContextMenuItem>团队</ContextMenuItem>
    <ContextMenuItem>订阅</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

示例

基础示例

一个带有少量操作的简单上下文菜单。

import {
  ContextMenu,
  ContextMenuContent,

子菜单

使用 ContextMenuSub 嵌套二级操作。

import {
  ContextMenu,
  ContextMenuContent,

快捷键

添加 ContextMenuShortcut 显示键盘提示。

import {
  ContextMenu,
  ContextMenuContent,

分组

将相关操作分组并用分割线隔开。

import {
  ContextMenu,
  ContextMenuContent,

图标

结合图标和标签，快速浏览。

import {
  ContextMenu,
  ContextMenuContent,

复选框

使用 ContextMenuCheckboxItem 创建切换项。

import {
  ContextMenu,
  ContextMenuCheckboxItem,

单选框

使用 ContextMenuRadioItem 创建单选选项。

"use client"

import * as React from "react"

危险操作

使用 variant="destructive" 样式标记菜单项为危险操作。

import {
  ContextMenu,
  ContextMenuContent,

侧边位置

通过 side 和 align 属性控制子菜单的位置。

import {
  ContextMenu,
  ContextMenuContent,

API 参考

更多信息请查看 Radix UI 文档。

命令数据表格 Data Table

安装用法示例基础示例子菜单快捷键分组图标复选框单选框危险操作侧边位置 API 参考