Component

ContextMenu

우클릭과 모바일 롱프레스로 여는 좌표 기반 메뉴입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@amineslab/ui'

function ContextMenuExample({ disabled = false, inset = false } = {}) {
    return (<ContextMenu>
      <ContextMenuTrigger asChild>
        <div className="flex min-h-24 w-full max-w-lg items-center justify-center rounded-overlay border border-dashed border-elevation-800 text-body-2 text-text-secondary">
          마우스 오른쪽 클릭 또는 길게 누르기
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem disabled={disabled} inset={inset} onSelect={() => undefined}>
          이름 바꾸기
        </ContextMenuItem>
        <ContextMenuItem onSelect={() => undefined}>복제하기</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>);
}

export default function ExamplePreview() {
  return (<ContextMenuExample {...({"disabled":false,"inset":false} as const)}/>)
}

Props

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  // ...
} from '@amineslab/ui'

`ContextMenuItem`

작업 하나를 실행하는 항목입니다.

Name	Type	Default	Description
`disabled`	`boolean`	`false`	선택할 수 없게 합니다.
`inset`	`boolean`	`false`	아이콘이 있는 항목과 시작선을 맞춥니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

우클릭 · 롱프레스

Radix의 동일 트리거가 데스크톱 우클릭과 모바일 롱프레스를 처리합니다.

마우스 오른쪽 클릭 또는 길게 누르기

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@amineslab/ui'

function ContextMenuExample({ disabled = false, inset = false } = {}) {
    return (<ContextMenu>
      <ContextMenuTrigger asChild>
        <div className="flex min-h-24 w-full max-w-lg items-center justify-center rounded-overlay border border-dashed border-elevation-800 text-body-2 text-text-secondary">
          마우스 오른쪽 클릭 또는 길게 누르기
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem disabled={disabled} inset={inset} onSelect={() => undefined}>
          이름 바꾸기
        </ContextMenuItem>
        <ContextMenuItem onSelect={() => undefined}>복제하기</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>);
}

export default function ExamplePreview() {
  return (<ContextMenuExample />)
}

사용 기준

권장하는 사용

Trigger가 감싼 영역에서 우클릭하면 해당 좌표에 메뉴가 열립니다.
모바일에서는 같은 Trigger가 롱프레스로 동작합니다.
체크·라디오·하위 메뉴가 필요하면 compound API를 조합하세요.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow Up / Down: 메뉴 항목을 이동합니다.
Enter: 현재 항목을 실행합니다.
Escape: 메뉴를 닫습니다.