Context Menu

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

대상에서 오른쪽 클릭이나 길게 누르기로 빠른 액션을 제공하는 보조 메뉴입니다. 항상 같은 액션을 제공하는 보이는 Menu와 함께 사용하세요. 두 경로 모두 상태와 액션 핸들러를 공유합니다.

중요한 기능을 오른쪽 클릭으로만 제공하지 마세요. Base UI 1.9에서 Trigger는 Shift+F10을 처리하지 않는 div입니다. 키보드 사용자는 보이는 Menu.Trigger에서 같은 액션을 실행합니다. 브라우저 기본 컨텍스트 메뉴가 필요한 입력이나 링크가 아닌, 비대화형 콘텐츠만 감싸세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Trigger + Portal → Content(Positioner + Popup) → Item / CheckboxItem / SubmenuRoot

키보드와 접근성

Tab으로 보이는 Menu.Trigger에 이동한 뒤 Enter나 Space로 메뉴를 엽니다. 화살표 키, Home, End, 타자 사전 입력으로 항목 사이를 이동합니다. Enter는 항목을 실행하고, Escape는 메뉴를 닫습니다. ContextMenu는 기본 포인터 위치 지정과 충돌 회피를 유지합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { ContextMenu, Menu } from '@surflane/ui'

<ContextMenu.Root>
  <ContextMenu.Trigger>Log preview</ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content collisionPadding={12}>
      <ContextMenu.Item onClick={openLogs}>Open logs</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>
{
  /* Always offer the same action through a visible control. */
}
<Menu.Root>
  <Menu.Trigger>Log actions</Menu.Trigger>
  <Menu.Portal>
    <Menu.Content>
      <Menu.Item onClick={openLogs}>Open logs</Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰