操作与浮层@neumorphism-ui/context-menu

Context Menu

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

@neumorphism-ui/context-menu

Registry JSON

预览

文档工具

已保存

安装

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

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";
import * as React from "react";
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

Example

export default function Example() {
  const [details, setDetails] = React.useState(true);
  const [message, setMessage] = React.useState("就绪");
  return <div className="grid gap-3">
    <ContextMenu>
      <ContextMenuTrigger className="grid min-h-32 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] p-6 [box-shadow:var(--neu-shadow-inset)]">
        右键打开菜单
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel>文档</ContextMenuLabel>
        <ContextMenuItem onClick={() => setMessage("已复制")}>复制<ContextMenuShortcut>⌘C</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuCheckboxItem checked={details} onCheckedChange={setDetails}>显示详细信息</ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p>
  </div>;
}

API 参考

组件	属性	类型	默认值	说明
`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`	`—`	控制互斥单选项的选择。

预览

安装

用法

Import

Example

API 参考

无障碍