Tabs
같은 대상의 다른 보기를 오갈 때만 써요. 페이지 이동 링크에는 쓰지 않아요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
default
disabled
selected
selected · disabled
사용법
- 무거운 내용이면 activateOnFocus={false}화살표는 이동만, Enter·Space로 전환해요.
- 포커스 링탭은 안쪽(−2px), 패널은 바깥(2px)에 그려요. 마우스로 누를 때는 보이지 않아요.
- 표시 막대선택 표시 2px bg/primary가 duration/normal로 움직여요. 목록과 패널 사이 space/4.
Props
| prop | 값 | 기본값 |
|---|---|---|
| Tabs value · defaultValue | 선택한 탭 | — |
| TabsList activateOnFocus | 화살표로 이동하면 바로 전환 | true |
| TabsList loopFocus | 끝에서 처음으로 | true |
| Tab disabled | boolean | false |
코드
tsx
<Tabs defaultValue="overview">
<TabsList><Tab value="overview">개요</Tab><Tab value="usage">사용량</Tab></TabsList>
<TabsPanel value="overview">…</TabsPanel>
<TabsPanel value="usage">…</TabsPanel>
</Tabs>