탭
한 화면 안에서 관련 콘텐츠 섹션을 전환하는 밑줄 탭이다. SegmentControl 이 같은 데이터의 표시 모드 전환이라면, Tabs 는 서로 다른 콘텐츠 섹션을 전환한다.
활용 방법
콘텐츠 탭
tabs 배열에 label 과 content 를 함께 전달한다.
Preview
요약 정보
tsx
<Tabs tabs={[{ value: "overview", label: "개요", content: <>요약 정보</> }]} />
탭 바만
라우트나 외부 상태가 콘텐츠를 렌더하면 renderContent=false 로 탭 바만 쓴다.
Preview
tsx
<Tabs renderContent={false} tabs={tabs} />
사용 지침
- · 같은 화면 안의 관련 섹션 전환에 쓴다.
- · 목록/보드 같은 표시 모드 전환은 SegmentControl 을 쓴다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tabs | TabItem[] | - | value·label·content·disabled |
| defaultValue | string | - | 초기 선택값 |
| value | string | - | controlled 선택값 |
| onChange | (value: string) => void | - | 선택 변경 콜백 |
| renderContent | boolean | true | 선택 탭 content 렌더 여부 |