탐색 · SINCE v0.1.0
Tabs — segmented와 underline을 지원하는 controlled Tabs
리터럴 value 타입을 보존하며 segmented·underline 두 표현을 제공하는 Expo와 React Native용 탭 컴포넌트입니다.
Tabs 사용 시점과 역할
Tabs는 items에서 추론한 문자열 유니언으로 현재 value와 onChange를 연결합니다. 잘못된 탭 값은 NoInfer 계약으로 타입 검사에서 드러나며, 항목별 disabled 상태도 지원합니다.
- 카드형 segmented와 하단선형 underline 변형
- items에서 추론한 value 유니언으로 오타 차단
- 활성·비활성·disabled 색상과 elevation을 테마에서 해석
설치와 최소 예제
Tabs: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Tabs } from '@gj-kit/expo-ui';
<Tabs items={tabs} value={activeTab} onChange={setActiveTab} variant="underline" />접근성과 플랫폼 동작
각 항목은 tab 역할과 selected 상태를 노출하고 disabled 항목은 입력에서 제외됩니다. 탭이 전환하는 패널의 구조와 포커스 정책은 화면에서 함께 설계해야 합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.