mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
19 lines
21 KiB
JSON
19 lines
21 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "context-menu-example",
|
|
"title": "Context Menu",
|
|
"registryDependencies": [
|
|
"button",
|
|
"context-menu",
|
|
"dialog",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-maia/examples/context-menu-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@/registry/base-maia/ui/context-menu\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n return (\n <ExampleWrapper>\n <ContextMenuBasic />\n <ContextMenuWithIcons />\n <ContextMenuWithSides />\n <ContextMenuWithShortcuts />\n <ContextMenuWithSubmenu />\n <ContextMenuWithGroups />\n <ContextMenuWithCheckboxes />\n <ContextMenuWithRadio />\n <ContextMenuWithDestructive />\n <ContextMenuInDialog />\n <ContextMenuWithInset />\n </ExampleWrapper>\n )\n}\n\nfunction ContextMenuBasic() {\n return (\n <Example title=\"Basic\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>Back</ContextMenuItem>\n <ContextMenuItem disabled>Forward</ContextMenuItem>\n <ContextMenuItem>Reload</ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithIcons() {\n return (\n <Example title=\"With Icons\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n Cut\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ClipboardPasteIcon\"\n tabler=\"IconClipboard\"\n hugeicons=\"ClipboardIcon\"\n phosphor=\"ClipboardIcon\"\n remixicon=\"RiClipboardLine\"\n />\n Paste\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete\n </ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithShortcuts() {\n return (\n <Example title=\"With Shortcuts\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>\n Back\n <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem disabled>\n Forward\n <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Reload\n <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem>\n Save\n <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Save As...\n <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithSubmenu() {\n return (\n <Example title=\"With Submenu\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>\n Copy\n <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Cut\n <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSub>\n <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n <ContextMenuSubContent>\n <ContextMenuGroup>\n <ContextMenuItem>Save Page...</ContextMenuItem>\n <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n <ContextMenuItem>Name Window...</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem>Developer Tools</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuSubContent>\n </ContextMenuSub>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithGroups() {\n return (\n <Example title=\"With Groups, Labels & Separators\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuLabel>File</ContextMenuLabel>\n <ContextMenuItem>\n New File\n <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Open File\n <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Save\n <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuLabel>Edit</ContextMenuLabel>\n <ContextMenuItem>\n Undo\n <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Redo\n <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem>\n Cut\n <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Copy\n <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n </ContextMenuItem>\n <ContextMenuItem>\n Paste\n <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem variant=\"destructive\">\n Delete\n <ContextMenuShortcut>⌫</ContextMenuShortcut>\n </ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithCheckboxes() {\n return (\n <Example title=\"With Checkboxes\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuCheckboxItem defaultChecked>\n Show Bookmarks Bar\n </ContextMenuCheckboxItem>\n <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n <ContextMenuCheckboxItem defaultChecked>\n Show Developer Tools\n </ContextMenuCheckboxItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithRadio() {\n const [user, setUser] = React.useState(\"pedro\")\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n <Example title=\"With Radio Group\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuLabel>People</ContextMenuLabel>\n <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n <ContextMenuRadioItem value=\"pedro\">\n Pedro Duarte\n </ContextMenuRadioItem>\n <ContextMenuRadioItem value=\"colm\">\n Colm Tuite\n </ContextMenuRadioItem>\n </ContextMenuRadioGroup>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuLabel>Theme</ContextMenuLabel>\n <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n </ContextMenuRadioGroup>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithDestructive() {\n return (\n <Example title=\"With Destructive Items\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"PencilIcon\"\n tabler=\"IconPencil\"\n hugeicons=\"EditIcon\"\n phosphor=\"PencilIcon\"\n remixicon=\"RiPencilLine\"\n />\n Edit\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"ShareIcon\"\n phosphor=\"ShareIcon\"\n remixicon=\"RiShareLine\"\n />\n Share\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ArchiveIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n Archive\n </ContextMenuItem>\n <ContextMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete\n </ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n\nfunction ContextMenuWithSides() {\n return (\n <Example title=\"With Sides\" containerClassName=\"col-span-2\">\n <div className=\"flex flex-wrap justify-center gap-2\">\n {(\n [\n \"inline-start\",\n \"left\",\n \"top\",\n \"bottom\",\n \"right\",\n \"inline-end\",\n ] as const\n ).map((side) => (\n <ContextMenu key={side}>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] items-center justify-center rounded-lg border p-4 text-sm capitalize\">\n {side.replace(\"-\", \" \")}\n </ContextMenuTrigger>\n <ContextMenuContent side={side}>\n <ContextMenuGroup>\n <ContextMenuItem>Back</ContextMenuItem>\n <ContextMenuItem>Forward</ContextMenuItem>\n <ContextMenuItem>Reload</ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n ))}\n </div>\n </Example>\n )\n}\n\nfunction ContextMenuInDialog() {\n return (\n <Example title=\"In Dialog\">\n <Dialog>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Context Menu Example</DialogTitle>\n <DialogDescription>\n Right click on the area below to see the context menu.\n </DialogDescription>\n </DialogHeader>\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuGroup>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n Cut\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ClipboardPasteIcon\"\n tabler=\"IconClipboard\"\n hugeicons=\"ClipboardIcon\"\n phosphor=\"ClipboardIcon\"\n remixicon=\"RiClipboardLine\"\n />\n Paste\n </ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuSub>\n <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n <ContextMenuSubContent>\n <ContextMenuGroup>\n <ContextMenuItem>Save Page...</ContextMenuItem>\n <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n <ContextMenuItem>Name Window...</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem>Developer Tools</ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuSubContent>\n </ContextMenuSub>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete\n </ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuContent>\n </ContextMenu>\n </DialogContent>\n </Dialog>\n </Example>\n )\n}\n\nfunction ContextMenuWithInset() {\n const [showBookmarks, setShowBookmarks] = React.useState(true)\n const [showUrls, setShowUrls] = React.useState(false)\n const [theme, setTheme] = React.useState(\"system\")\n\n return (\n <Example title=\"With Inset\">\n <ContextMenu>\n <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n Right click here\n </ContextMenuTrigger>\n <ContextMenuContent className=\"w-44\">\n <ContextMenuGroup>\n <ContextMenuLabel>Actions</ContextMenuLabel>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy\n </ContextMenuItem>\n <ContextMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n Cut\n </ContextMenuItem>\n <ContextMenuItem inset>Paste</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuLabel inset>Appearance</ContextMenuLabel>\n <ContextMenuCheckboxItem\n inset\n checked={showBookmarks}\n onCheckedChange={setShowBookmarks}\n >\n Bookmarks\n </ContextMenuCheckboxItem>\n <ContextMenuCheckboxItem\n inset\n checked={showUrls}\n onCheckedChange={setShowUrls}\n >\n Full URLs\n </ContextMenuCheckboxItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuGroup>\n <ContextMenuLabel inset>Theme</ContextMenuLabel>\n <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n <ContextMenuRadioItem inset value=\"light\">\n Light\n </ContextMenuRadioItem>\n <ContextMenuRadioItem inset value=\"dark\">\n Dark\n </ContextMenuRadioItem>\n <ContextMenuRadioItem inset value=\"system\">\n System\n </ContextMenuRadioItem>\n </ContextMenuRadioGroup>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuSub>\n <ContextMenuSubTrigger inset>More Options</ContextMenuSubTrigger>\n <ContextMenuSubContent>\n <ContextMenuGroup>\n <ContextMenuItem>Save Page...</ContextMenuItem>\n <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n </ContextMenuGroup>\n </ContextMenuSubContent>\n </ContextMenuSub>\n </ContextMenuContent>\n </ContextMenu>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |