Context menu
即 Dropdown menu，但不由按钮打开，而是在区域内右键单击或长按的位置弹出。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/context-menu示例
右键单击委托
Right-click the job card
import { useState } from "react";import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger,} from "@/components/zero/context-menu";export default function ContextMenuJob() { const [pinned, setPinned] = useState(true); return ( <ContextMenu> <ContextMenuTrigger className="grid h-40 w-full max-w-sm place-items-center border-(length:--zero-stroke-thin) border-zero-line border-dashed font-bold font-zero text-zero-sm text-zero-text-3 italic"> Right-click the job card </ContextMenuTrigger> <ContextMenuContent> <ContextMenuItem> Take it <ContextMenuShortcut>⌘T</ContextMenuShortcut> </ContextMenuItem> <ContextMenuSub> <ContextMenuSubTrigger>Send to</ContextMenuSubTrigger> <ContextMenuSubContent> <ContextMenuItem>Mara</ContextMenuItem> <ContextMenuItem>Rui</ContextMenuItem> <ContextMenuItem>Jo</ContextMenuItem> </ContextMenuSubContent> </ContextMenuSub> <ContextMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}> Pinned </ContextMenuCheckboxItem> <ContextMenuSeparator /> <ContextMenuItem danger>Abandon</ContextMenuItem> </ContextMenuContent> </ContextMenu> );}行为
菜单项、标签、分隔线、复选与单选菜单项以及子菜单，都是 Dropdown menu 的同一套部件，仅改以 ContextMenu 命名。子菜单在所属菜单项旁打开，打开期间该菜单项保持浮起色背景。
属性
ContextMenuTrigger
另可传入 Base UI ContextMenu.Trigger 的全部属性。
ContextMenuContent
另可传入 Base UI Menu.Popup 的全部属性。