콘텐츠로 이동
RefineUI

Context Menu

우클릭으로 열리는 메뉴입니다.

설치

섹션 제목: “설치”
npm install @refineui/react @refineui/tokens

사용법

섹션 제목: “사용법”
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuPortal,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@refineui/react";


<ContextMenu>
  <ContextMenuTrigger asChild>
    <div>Right click</div>
  </ContextMenuTrigger>
  <ContextMenuPortal>
    <ContextMenuContent>
      <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuSub>
        <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
        <ContextMenuPortal>
          <ContextMenuSubContent>
            <ContextMenuItem>Rename</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuPortal>
      </ContextMenuSub>
    </ContextMenuContent>
  </ContextMenuPortal>
</ContextMenu>

onSelect는 이벤트를 받습니다. preventDefault()를 호출하면 메뉴가 열린 채로 유지됩니다. disabled 항목은 선택되지 않습니다.