Menubar
데스크톱 방식 키보드 탐색으로 애플리케이션 메뉴를 조정해요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 합성 | 하나의 TRMenubar 안에 TRMenu.Root 자식을 렌더링해요. |
| 방향 | horizontal은 왼쪽/오른쪽 키, vertical은 위/아래 키를 써요. |
| 사용 가능 여부 | TRMenu.Root 하나만 비활성화하거나 메뉴 막대 전체를 비활성화해요. |
| 경계 | loopFocus는 끝에서 순환하며 기본값은 true예요. |
계속 보이는 애플리케이션 명령에 메뉴 막대를 써요. 사이트 탐색에는 쓰지 않아요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/menubar.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRMenubar } from '@tinyrack/ui/components/menubar';
import { TRMenu } from '@tinyrack/ui/components/menu';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
사용 가능 여부를 정해요
탐색 방향을 골라요
경계 동작을 골라요
API
TRMenubar는 Base UI 루트 prop을 받아요. orientation은 'horizontal' | 'vertical'이고 기본값은 'horizontal'이에요. loopFocus는 불리언이고 기본값은 true, disabled는 불리언이고 기본값은 false예요. 루트에 접근 가능한 이름을 제공해요. 하나의 순환 tab stop을 유지하고, 비활성 자식을 건너뛰고, 초점이 이동할 때 열린 메뉴를 바꾸고, Escape 뒤에 트리거 초점을 복원해요.
@tinyrack/ui/components/menu의 TRMenu.Root 자식과 오버레이 파트를 합성해요. Base UI의 render, 루트 ref, 네이티브 prop, 이벤트, 함수형 className / style, 상태 data 속성을 유지해요. @tinyrack/ui/components/menubar.css가 합성한 메뉴 파트 스타일을 포함하므로 menu CSS를 따로 가져오지 않아요.
TRMenubar, TRMenubarProps, TRMenubarState를 @tinyrack/ui/components/menubar에서 내보내요.