Tabs
같은 맥락의 패널을 한 번에 하나씩 전환합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/tabs.tsx- 소스
- 소스
- 외부 의존성
radix-ui
실제 미리보기
핵심 목적과 사용 범위를 확인합니다.
사용할 때
사용 기준
사용자가 같은 수준의 두세 보기를 빠르게 오갈 때 씁니다.
사용하지 않을 때
순서가 있는 단계나 서로 독립된 페이지 이동에는 쓰지 않습니다.
변형과 상태
default고정 예시첫 패널과 활성 탭이 연결되는지 확인합니다.
핵심 목적과 사용 범위를 확인합니다.selected고정 예시파란 상태선과 aria-selected가 함께 바뀌는지 확인합니다.
공개 API와 상태를 확인합니다.disabled고정 예시비활성 탭을 방향키가 건너뛰는지 확인합니다.
핵심 목적과 사용 범위를 확인합니다.
접근성
tablist, tab, tabpanel 관계와 방향키 로빙 초점을 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
value | string | 아니요 | 제어되는 활성 탭 값입니다. |
defaultValue | string | 아니요 | 비제어 초기 탭 값입니다. |
orientation | "horizontal" | "vertical" | 아니요 | 탭의 탐색 방향입니다. |
사용 예시
지원 importimport {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@/components/ui/tabs"
<Tabs defaultValue="overview">
<TabsList aria-label="Views">
<TabsTrigger value="overview">Overview</TabsTrigger>
</TabsList>
<TabsContent value="overview">Content</TabsContent>
</Tabs>