Menu
전용 트리거에서 키보드로 탐색할 수 있는 명령을 보여줘요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 명령 의미 | 작업은 Item, 이동은 LinkItem, 유지할 선택은 선택 항목을 써요. |
| 방향 | 일반 메뉴는 vertical, 가로 명령 집합은 horizontal을 써요. |
| 배치 | Positioner의 side 네 값과 align 세 값으로 정해요. |
| 소유권 | Trigger와 Root를 함께 두거나 createHandle로 분리된 파트를 연결해요. |
전용 트리거가 명령을 열 때 메뉴를 써요. 임의의 오른쪽 클릭 대상에는 TRContextMenu, 사이트 목적지에는 TRNavigationMenu를 써요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/menu.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRMenu } from '@tinyrack/ui/components/menu';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
명령 의미를 골라요
키보드 방향을 골라요
팝업을 배치해요
분리된 트리거를 연결해요
키보드 모델을 따라요
API
상태와 오버레이
Root는 open과 onOpenChange를 쓰는 제어 상태, defaultOpen을 쓰는 비제어 상태, orientation, loopFocus, modal, disabled를 지원해요. Trigger가 메뉴를 열어요. Portal, Backdrop, Positioner, Popup, Arrow, 선택 사항인 Viewport가 충돌을 피하는 레이어를 구성해요. Positioner는 side, align, 간격, 충돌 회피, 사용자 지정 기준 요소를 지원해요.
콘텐츠와 합성
Group, GroupLabel, Separator로 콘텐츠를 구분해요. Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, RadioItemIndicator로 명령 의미를 정해요. SubmenuRoot와 SubmenuTrigger는 중첩 메뉴 상태와 키보드 진입을 관리해요. LinkItem은 closeOnClick을 설정할 때 닫혀요.
createHandle은 분리된 Trigger payload와 Root를 연결하는 타입 있는 Base UI 핸들을 만들어요. 모든 파트의 컴포넌트, prop 타입, 상태 타입을 @tinyrack/ui/components/menu에서 이름으로 내보내요. Base UI의 render, ref, 네이티브 prop, 이벤트, 상태 데이터 속성을 유지해요. CSS는 직접 가져와야 해요.