Tabs
세 가지 밀도, 두 가지 방향, 수동·자동 활성화를 지원하는 키보드 탐색 가능 뷰예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
uiSize | md, lg | md |
orientation | horizontal, vertical | horizontal |
| 비활성화된 탭 | TRTabs.Tab disabled | false |
| 활성화 | 수동 또는 activateOnFocus | 수동 |
| 포커스 | 순환 또는 경계에서 정지 | 순환 |
| 상태 | null을 포함하는 제어형 value 또는 비제어형 defaultValue | 사용 가능한 첫 탭 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/tabs.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRTabs } from '@tinyrack/ui/components/tabs';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
제어형 수동 활성화 고유 링크
화살표 키로 포커스를 이동해요. Enter 또는 Space로 포커스된 탭을 선택하고 결과를 업데이트해요.
예시
넘침과 표시기 고유 링크
좁은 탭 줄은 가로로 스크롤되며 선택적 표시기가 활성 탭을 따라가요.
구조
Root는 제어형 또는 비제어형 선택 상태, 방향,uiSize를 관리해요.List는 접근 가능한 이름이 있는 탭 목록이며 활성화 방식과 포커스 순환을 설정해요.Tab은value로 뷰를 식별해요. 비활성화된 탭은 포커스할 수 있지만 활성화할 수 없어요.Indicator는 선택 사항이며 넘치는 탭 줄에서도 활성 탭을 따라가요.Panel은 같은value를 가진 탭과 접근 가능한 콘텐츠를 연결해요.
API
| 파트 | 주요 속성 | 설명 |
|---|---|---|
Root | value, defaultValue, onValueChange, orientation, uiSize | 활성 탭이 없게 하려면 value={null}을 사용해요. 값을 지정하지 않으면 사용 가능한 첫 탭이 선택돼요. |
List | activateOnFocus, loopFocus | 수동 활성화와 포커스 순환이 기본값이에요. |
Tab | value, disabled, render | 화살표 키는 포커스를 이동하고 수동 모드에서는 Enter 또는 Space로 활성화해요. |
Indicator | renderBeforeHydration, render | Base UI 기하 변수로 움직이는 선택적 시각 표시기예요. |
Panel | value, keepMounted, hiddenUntilFound, render | 탭 값과 일치하며 ARIA 관계를 유지해요. |
Base UI가 역할, 포커스 이동, 선택, 하이드레이션에 안전한 상태를 제공해요. Tinyrack 기반 스타일 뒤에 tabs.css를 가져오세요. --tr-tabs-indicator-background, --tr-tabs-indicator-size, --tr-tabs-radius, --tr-tabs-tab-height, --tr-tabs-panel-padding으로 스타일을 조정할 수 있어요.