Tabs

여러 탭을 통해 콘텐츠 영역을 전환할 수 있는 탭 기본 UI

개요

탭 컴포넌트는 사용자가 여러 화면이나 콘텐츠 영역을 같은 공간에서 전환하여 볼 수 있도록 돕습니다. 원본 CALS Vue 컴포넌트(vQSTabs)의 동작과 API를 지원하며, 동시에 React Compositional 패턴도 함께 지원합니다.

✅ 데이터 기반 렌더링: panes prop을 통한 일괄 렌더링 지원 (CALS 호환 방식)
✅ Compositional API: children prop과 <TabsList>, <TabsContent> 등을 통한 유연한 마크업 구성 지원
✅ 토큰 오버라이드: 컴포넌트 전체 또는 개별 탭의 배경색, 글자색 등을 자유롭게 오버라이드

panes 배열 데이터를 통해 탭 구조를 정의하고 렌더링합니다. CALS 시스템과의 데이터 호환성에 가장 적합합니다.

Make changes to your account here.

activeTab과 onTabChange 이벤트를 사용하여 외부에서 활성 탭 상태를 관리합니다.

Active Tab: account

Make changes to your account here.

backgroundColor, color, borderColor, borderWidth props를 사용하여 탭 컴포넌트의 전체적인 디자인 토큰을 동적으로 오버라이드할 수 있습니다.

Make changes to your account here.

panes 데이터 없이 표준 React compositional UI 방식으로 마크업을 자유롭게 작성할 수 있습니다. 각 탭의 세밀한 커스터마이징이 필요할 때 적합합니다.

Make changes to your account here using compositional API.

Prop	Type	Default	Description
`panes`	`TabPane[]`	-	화면에 렌더링할 탭 패널 데이터 배열
`activeTab`	`string`	-	현재 활성화된 탭의 ID (Controlled)
`defaultActiveTab`	`string`	-	초기 활성화 탭의 ID (Uncontrolled)
`visible`	`boolean`	`true`	화면 표시 여부
`backgroundColor`	`string`	-	전체 배경색 토큰 오버라이드
`color`	`string`	-	전체 글자색 토큰 오버라이드
`borderColor`	`string`	-	전체 테두리색 토큰 오버라이드
`borderWidth`	`string \| number`	-	전체 테두리 두께 오버라이드
`className`	`string`	-	컴포넌트 외곽 컨테이너에 적용할 클래스

Event	Type	Description
`onTabChange`	`(tabId: string) => void`	탭 변경 시 호출

Property	Type	Default	Description
`id`	`string`	-	탭 고유 ID
`title`	`string`	-	탭에 표시될 제목
`hidden`	`boolean`	`false`	탭 숨김 여부
`disabled`	`boolean`	`false`	탭 비활성화 여부
`content`	`ReactNode`	-	탭 활성화 시 렌더링될 콘텐츠
`style`	`object`	-	개별 탭의 배경, 글자색 등 특정 토큰 오버라이드

✅ 사용자가 탭 항목 간 이동 시 화살표 키 네비게이션이 자동으로 동작합니다.
✅ 적절한 WAI-ARIA Role (tablist, tab, tabpanel) 이 적용되어 있어 스크린리더에서 탭 구조로 인식합니다.