탭
관련 섹션을 한 화면에서 전환하는 밑줄 탭이다. 활성 탭 아래로 navy 밑줄이 이동하고 선택된 content만 렌더한다.
활용 방법
섹션 전환
각 탭의 content를 함께 넘기면 선택된 패널이 아래에 렌더된다.
Preview
계약 요약 정보다.
tsx
<Tabs tabs={[{ value: "summary", label: "요약", content: <p>...</p> }, { value: "detail", label: "내역", content: <p>...</p> }]} />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tabs | TabItem[] | - | 탭 목록(value·label·content·disabled) |
| defaultValue | string | - | 초기 활성 탭 |
| value | string | - | 제어 모드 활성 값 |
| onChange | (value: string) => void | - | 탭 변경 콜백 |
| renderContent | boolean | true | 선택 content 렌더 여부 |