Context Menu

用于从项目或区域的上下文手势打开相关命令。

预览

文档上下文操作

打开文档工具菜单，尝试本地撤销命令，并切换高级设置勾选项。

文档工具

已保存

正在加载预览。

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/context-menu

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

使用 ContextMenuTrigger 包住目标，在 ContextMenuContent 中放入名称明确的项目。重要命令也应能通过可见的普通控件执行。

"use client";

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

export default function Example() {
  const [message, setMessage] = useState("Right-click the document.");
  return (
    <div>
      <ContextMenu>
        <ContextMenuTrigger className="block p-6">Document</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onClick={() => setMessage("Document duplicated.")}>Duplicate</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p role="status">{message}</p>
    </div>
  );
}

API 参考

保留 Base UI 的指针锚定和键盘导航，并将弹层呈现为悬浮的新拟态表面。可组合普通、复选、单选、子菜单和危险操作项。

组件	属性	类型	默认值	说明
`ContextMenu`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	控制菜单的打开状态。
`ContextMenuContent`	`side / align / sideOffset`	`Positioner props`	`—`	调整弹层相对指针锚点的位置和间距。
`ContextMenuItem`	`disabled`	`boolean`	`false`	让项目保持可见但不可执行。
`ContextMenuCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	控制可勾选菜单项的状态。
`ContextMenuRadioGroup`	`value / onValueChange`	`string / (value: string) => void`	`—`	控制互斥单选项的选择。

预览

文档上下文操作

安装

用法

API 参考

无障碍