탭
관련된 여러 뷰를 한 영역에서 전환하는 밑줄 탭이다. 활성 탭은 네온 라인으로 표시되고, 각 탭의 content가 같은 자리에서 교체된다.
활용 방법
관측 뷰 전환
각 탭의 content를 같은 자리에서 바꾼다. disabled로 준비되지 않은 탭을 잠근다.
Preview
실시간 로그 스트림이 여기 흐른다.
tsx
<Tabs tabs={[{ value: "logs", label: "LOGS", content: <LogView /> }, { value: "metrics", label: "METRICS", content: <MetricView /> }]} />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tabs | TabItem[] | - | 탭 목록 |
| defaultValue | string | - | 초기 활성 value |
| value | string | - | controlled 활성 value |
| onChange | (value: string) => void | - | 전환 콜백 |
| renderContent | boolean | true | 활성 content 렌더 여부 |