Tabs

한 번에 하나씩 표시되는 레이어드 콘텐츠 섹션(탭 패널)들의 집합이에요.

출처: 문서

본문

탭 목록에서 선택한 탭에 해당하는 콘텐츠 패널을 한 번에 하나씩 보여 주는 컴포넌트예요. 가로/세로 방향과 자동/수동 활성화를 지원하고 키보드 내비게이션을 완전히 지원해요.

Features

제어(controlled)/비제어(uncontrolled) 방식 모두 지원.
가로/세로 방향 지원.
자동/수동 활성화 지원.
완전한 키보드 내비게이션.

Anatomy

모든 파트를 임포트해 조립해요.

import { Tabs } from "radix-ui";

export default () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger />
    </Tabs.List>

    <Tabs.Content />
  </Tabs.Root>
);

API Reference

Root

탭 컴포넌트의 모든 파트를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultValue`	`string`	No default value
`value`	`string`	No default value
`onValueChange`	`function`	No default value
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	No default value
`activationMode`	`enum`	`"automatic"`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

List

활성 콘텐츠의 가장자리를 따라 정렬되는 트리거들을 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`true`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

연관된 콘텐츠를 활성화하는 버튼이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Content

각 트리거와 연결된 콘텐츠를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"active" \| "inactive"`
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

세로 방향

orientation prop으로 세로 탭을 만들 수 있어요.

import { Tabs } from "radix-ui";

export default () => (
  <Tabs.Root defaultValue="tab1" orientation="vertical">
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>

      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>

      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>

    <Tabs.Content value="tab1">Tab one content</Tabs.Content>

    <Tabs.Content value="tab2">Tab two content</Tabs.Content>

    <Tabs.Content value="tab3">Tab three content</Tabs.Content>
  </Tabs.Root>
);

Accessibility

Tabs WAI-ARIA 디자인 패턴을 준수해요.

키보드 상호작용

Key	Description
`Tab`	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
`ArrowDown`	Moves focus to the next trigger depending on `orientation` and activates its associated content.
`ArrowRight`	Moves focus to the next trigger depending on `orientation` and activates its associated content.
`ArrowUp`	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
`ArrowLeft`	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
`Home`	Moves focus to the first trigger and activates its associated content.
`End`	Moves focus to the last trigger and activates its associated content.

더 알아보기 (Learn more)

activationMode="manual"로 설정하면 포커스 시 자동 활성화 대신 수동으로 탭을 활성화할 수 있어요.
Tabs.Content에 forceMount를 주면 비활성 상태에서도 콘텐츠를 렌더링할 수 있어요.