Tabs
여러 개의 관련 콘텐츠를 탭 구조로 한 화면 내에 표시하는 컴포넌트
개요
Tabs 컴포넌트는 Base UI 기반으로 탭 전환 UI를 제공합니다. 3가지 variant(default, line, outline)를 지원하며, 가로/세로 방향, 탭 너비 조절, Ellipsis 처리 등을 CSS 클래스로 유연하게 구성할 수 있습니다.
주요 특징
- ✅ 기본 레이아웃: default, line, outline 3가지 variant
- ✅ 탭 레이블 정렬: 중앙 정렬 기본
- ✅ 기본 선택 탭: defaultValue로 초기 Active 탭 지정
- ✅ 탭 너비: 자동 조절 기본, 고정값 설정 가능
- ✅ Ellipsis 처리: truncate 클래스로 말줄임
- ✅ 가로 스크롤 제한: overflow 처리
- ✅ 탭 선택 / 콘텐츠 전환: 클릭 시 1:1 매핑 콘텐츠 표시
기본 레이아웃 제공
Preview
3가지 variant(default, line, outline)로 탭 구조를 제공합니다.
기본 선택 탭 표시
Preview
defaultValue로 초기 진입 시 첫 번째 탭을 Active로 표시합니다.
탭 너비 자동 조절 / 고정 옵션
Preview
기본은 레이블 길이에 따라 유동적이며, className으로 고정 너비를 설정합니다.
Ellipsis 처리
Preview
탭 레이블이 너비를 초과할 경우 truncate로 말줄임 처리합니다.
탭 선택 / 콘텐츠 전환
Preview
탭 클릭 시 해당 탭이 선택되고 연결된 콘텐츠를 표시합니다.
API Reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | 기본 선택 탭 |
value | string | - | 제어형 선택 탭 |
onValueChange | (value: string) => void | - | 탭 변경 핸들러 |
orientation | "horizontal" | "vertical" | "horizontal" | 방향 |
className | string | - | 추가 CSS 클래스 |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "line" | "outline" | "default" | 스타일 variant |
className | string | - | 추가 CSS 클래스 |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 탭 식별값 |
variant | "default" | "line" | "outline" | "default" | 스타일 variant |
disabled | boolean | false | 비활성화 |
className | string | - | 추가 CSS 클래스 |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 연결된 탭 식별값 |
className | string | - | 추가 CSS 클래스 |
기본 사용법
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-foundation"
<Tabs defaultValue="tab1">
<TabsList variant="default">
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</Tabs>접근성
권장 사항
- ✅ 키보드 화살표로 탭 간 이동 가능 (Base UI 내장)
- ✅ Tab/Enter로 탭 활성화
- ✅
aria-selected자동 관리 - ❌ 탭 콘텐츠 없이 탭만 사용하지 않음
Last updated on