Context Menu

우클릭으로 열리는 컨텍스트 메뉴

Basic Usage

영역을 우클릭하면 컨텍스트 메뉴가 나타납니다.

Right click here

tsx

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuItem>
      Back
      <ContextMenuShortcut>Alt+Left</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem disabled>
      Forward
      <ContextMenuShortcut>Alt+Right</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Reload
      <ContextMenuShortcut>Ctrl+R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Save Page As...
      <ContextMenuShortcut>Ctrl+S</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>Print...</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With Submenus

중첩된 서브메뉴를 사용할 수 있습니다.

Right click here

tsx

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuItem>New Tab</ContextMenuItem>
    <ContextMenuItem>New Window</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent className="w-48">
        <ContextMenuItem>Save Page As...</ContextMenuItem>
        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
        <ContextMenuItem>Name Window...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Developer Tools</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks Bar
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>

With Radio Items

라디오 그룹으로 단일 선택이 가능합니다.

Right click here

tsx

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuLabel>View</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup value="bottom">
      <ContextMenuRadioItem value="top">
        Top
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="bottom">
        Bottom
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="right">
        Right
      </ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Usage

tsx

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from '@gpters-internal/ui';

function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click me</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Action
          <ContextMenuShortcut>Ctrl+A</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Another Action</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}