Tabs

한눈에#

한 영역에서 한 번에 한 뷰만 보이며 콘텐츠 패널을 전환하는 APG Tabs입니다 — 화살표로 이동하면 즉시 활성화됩니다(자동 활성화).

사용 시점#

한 번에 한 뷰만 보이며 패널을 전환하면 Tabs — 동시 비교나 옵션 토글은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Tabs } from '@wds/ui-web';

<Tabs
  defaultValue="overview"
>
  <Tabs.List aria-label="프로젝트 섹션">
      <Tabs.Trigger value="overview">개요</Tabs.Trigger>
      <Tabs.Trigger value="members">멤버</Tabs.Trigger>
      <Tabs.Trigger value="settings">설정</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="overview">개요 내용</Tabs.Content>
    <Tabs.Content value="members">멤버 내용</Tabs.Content>
    <Tabs.Content value="settings">설정 내용</Tabs.Content>
</Tabs>

해부#

트리거(탭 버튼)가 측정 단위입니다 — 패딩과 활성 인디케이터를 핀으로 표기합니다.

변형#

단일 변형입니다 — 활성 인디케이터는 하단 보더(primary) 한 가지 어휘만 사용합니다. 비활성 탭은 네이티브 disabled로 표현하며 키보드 순회에서 제외됩니다.

크기#

단일 크기입니다 — 트리거 패딩은 space.3/4, 레이블은 font-size.body-1 고정. 3단 size는 component 토큰 신설 기준(§4) 미충족으로 도입하지 않았습니다.

상태#

비제어/제어 컴파운드입니다 — 기본은 비제어로 <Tabs defaultValue>가 선택 상태를 소유하고 하위 파트(List/Trigger/Content)는 컨텍스트로 소비합니다. value를 주면 제어 모드가 되어 부모가 상태를 소유하고, 탭 클릭·화살표 자동 활성화 등 모든 전환은 내부 상태를 쓰지 않고 onValueChange(value)로만 통지됩니다(렌더는 부모 value를 따름). Hover/Focus/Disabled는 CSS 의사클래스, 선택 상태는 aria-selected 속성 셀렉터로 표현됩니다.

Props#

점 표기(Tabs.List)와 평탄 이름(TabsList)은 동일 함수입니다 — 서버 컴포넌트(RSC)에서는 클라이언트 참조에 점 접근이 해석되지 않으므로 평탄 이름을 사용하세요(이 문서의 데모도 평탄 이름).

<Tabs> (루트)

<Tabs.List>

<Tabs.Trigger> — 네이티브 button 속성 확장(disabled 등 전달)

<Tabs.Content>

접근성#

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

관련#