ContextMenu
포인터나 키보드 좌표에서 문맥에 맞는 명령을 열어요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 대상 | 오른쪽 클릭, 길게 누르기, Shift+F10, Context Menu 키를 받는 초점 가능한 Trigger를 써요. |
| 항목 | 실행 가능, 실행 불가, 이동 링크, 값을 유지하는 선택 항목 중에서 골라요. |
| variant | 일반 명령에는 default, 파괴적 명령에는 danger를 써요. |
| 위치 | 기본 포인터 좌표를 쓰거나 Positioner.anchor로 기준을 지정해요. |
| 터치 | 같은 명령을 여는 눈에 보이는 버튼을 함께 제공해요. |
전용 버튼이 기본 트리거라면 TRMenu를 쓰세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/context-menu.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRContextMenu } from '@tinyrack/ui/components/context-menu';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
항목 동작을 골라요
키보드 방향을 골라요
여는 방법을 골라요
위치 기준을 골라요
API
TRContextMenu.Root
open / defaultOpen, onOpenChange, 방향, 초점 순환, 모달 동작, 루트 disabled를 제어해요. 공개 변경 세부 정보는 이유와 네이티브 이벤트를 제공하고 루트 작업 타입도 내보내요.
TRContextMenu.Trigger
문맥 대상을 정의해요. Shift+F10과 Context Menu 키를 위해 초점을 받을 수 있게 해요.
TRContextMenu.Portal
오버레이를 document.body나 사용자 지정 컨테이너로 옮기고 keepMounted를 지원해요.
TRContextMenu.Backdrop
팝업 뒤의 투명한 modal 상호작용 레이어예요.
TRContextMenu.Positioner
포인터나 키보드 좌표를 사용해요. anchor는 그 좌표를 덮어쓰고, 중첩 Positioner는 SubmenuTrigger에 맞춰요.
TRContextMenu.Popup
순환 초점, 입력 검색, 제한된 스크롤을 가진 메뉴 표면을 렌더링해요.
TRContextMenu.Arrow
기준 요소를 가리키는 선택 사항 화살표예요.
TRContextMenu.Group
관련 명령을 묶어요.
TRContextMenu.GroupLabel
명령 그룹에 접근 가능한 이름을 제공해요.
TRContextMenu.Item
명령을 실행해요. variant는 'default' | 'danger'이고 기본값은 'default'예요. disabled는 실행을 막고 closeOnClick은 닫기 동작을 정해요.
TRContextMenu.LinkItem
href가 있는 이동 명령을 렌더링해요. 이동하면서 닫으려면 closeOnClick을 써요.
TRContextMenu.CheckboxItem
제어 또는 비제어 불리언 선택을 소유해요.
TRContextMenu.CheckboxItemIndicator
체크박스 항목을 선택했을 때 렌더링하고 계속 유지할 수도 있어요.
TRContextMenu.RadioGroup
선택한 값 하나를 소유해요.
TRContextMenu.RadioItem
라디오 값 하나를 나타내요.
TRContextMenu.RadioItemIndicator
라디오 항목을 선택했을 때 렌더링하고 계속 유지할 수도 있어요.
TRContextMenu.SubmenuRoot
중첩 메뉴의 열린 상태와 Escape 동작을 소유해요.
TRContextMenu.SubmenuTrigger
포인터나 키보드로 중첩 메뉴를 열어요.
TRContextMenu.Separator
명령 그룹을 시각적으로 나눠요.
모든 파트, prop 타입, 상태 타입을 @tinyrack/ui/components/context-menu에서 내보내요. Base UI의 render 합성, ref, 네이티브 prop, 이벤트, 상태 데이터 속성을 유지해요. CSS는 직접 가져와야 해요.