메인 컨텐츠로 이동
Version: 2.0.0-beta.10 🚧

도큐사우루스는 MDX 기반으로 <Tabs> 컴포넌트를 지원합니다.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
This is a banana 🍌
</TabItem>
</Tabs>
This is an apple 🍎

TabsvaluesdefaultValue 속성을 설정할 수 있습니다.

<Tabs
defaultValue="apple"
values={[
{label: 'Apple', value: 'apple'},
{label: 'Orange', value: 'orange'},
{label: 'Banana', value: 'banana'},
]}>
<TabItem value="apple">This is an apple 🍎</TabItem>
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
This is an apple 🍎

Tabs 속성은 TabItem 속성보다 우선합니다.
<Tabs
defaultValue="apple"
values={[
{label: 'Apple 1', value: 'apple'},
{label: 'Orange 1', value: 'orange'},
{label: 'Banana 1', value: 'banana'},
]}>
<TabItem value="apple" label="Apple 2">
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange 2">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana 2" default>
This is a banana 🍌
</TabItem>
</Tabs>
This is an apple 🍎

tip

기본적으로 모든 탭은 빌드 단계에서 빠르게 렌더링되며 검색 엔진은 숨겨진 탭까지 색인 처리합니다.

<Tabs lazy /> 설정 시 기본 탭만 렌더링하도록 설정할 수 있습니다.

기본 탭 표시하기

기본적으로 표시되는 첫 번째 탭의 동작을 직접 설정할 수 있습니다. tab 아이템 중 하나를 default로 설정해 기본 탭을 지정할 수 있습니다. Tabs 컴포넌트의 defaultValue 속성을 원하는 라벨값으로 설정할 수도 있습니다. 예를 들어 위의 예제에서는 value="apple" 탭에 default를 설정하거나 defaultValue="apple"을 설정하면 "Apple" 탭을 기본적으로 표시되는 탭으로 지정할 수 있습니다.

TabsdefaultValue 값을 설정했는데 존재하지 않은 값을 참조하는 경우 도큐사우루스에서는 오류로 처리합니다. 기본적으로 탭이 표시되지 않도록 하려면 defaultValue={null}로 설정하세요.

탭 선택 항목 동기화

같은 종류의 탭이라면 선택한 항목을 서로 동기화하기를 원할 수 있습니다. 예를 들어 윈도와 macOS 사용자에게 다른 사용법을 가이드하는 경우 한 번의 클릭으로 탭에서 선택한 운영체제를 변경하고 싶을 수 있습니다. 관련된 탭을 같은 groupId 속성으로 설정하면 원하는 기능을 구현할 수 있습니다. 이렇게 하면 선택한 값이 localStorage에 저장되고 같은 groupId 속성값으로 설정한 <Tab> 인스턴스는 값이 변경될 때마다 자동으로 업데이트됩니다. groupID는 전역 네임스페이스입니다.

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + C to copy.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + V to paste.</TabItem>
</Tabs>
Use Ctrl + C to copy.
Use Ctrl + V to paste.

같은 groupId 속성으로 설정한 모든 탭 그룹에서 사용할 수 있는 값이 똑같을 필요는 없습니다. 같은 groupId으로 설정한 다른 탭 그룹에는 없는 값을 선택했을 때는 변경된 값이 탭에 반영되지 않을 뿐입니다. 다음 예제가 그런 상황입니다. 탭에서 리눅스 항목을 선택해도 위에 있는 탭은 변경되지 않는 것을 확인할 수 있습니다.

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">
I am Windows.
</TabItem>
<TabItem value="mac" label="MacOS">
I am macOS.
</TabItem>
<TabItem value="linux" label="Linux">
I am Linux.
</TabItem>
</Tabs>
I am Windows.

groupId 속성값이 다른 탭은 서로 영향을 미치지 않습니다.

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Windows in windows.</TabItem>
<TabItem value="mac" label="MacOS">macOS is macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
<TabItem value="win" label="Windows">Windows is windows.</TabItem>
<TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
Windows in windows.
Windows is windows.

탭에 사용자 지정 스타일 적용하기

특정 탭은 사용자가 원하는 스타일로 변경할 수 있습니다. Tabs 컴포넌트에 className 속성을 추가하고 원하는 CSS 클래스를 지정합니다.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs className="unique-tabs">
<TabItem value="Apple">This is an apple 🍎</TabItem>
<TabItem value="Orange">This is an orange 🍊</TabItem>
<TabItem value="Banana">This is a banana 🍌</TabItem>
</Tabs>;
This is an apple 🍎