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

도큐사우루스는 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>
http://localhost:3000
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>
http://localhost:3000
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>
http://localhost:3000
This is an apple 🍎

tip

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

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

기본 탭 표시하기

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

Docusaurus will throw an error if a defaultValue is provided for the Tabs but it refers to a non-existing value. 기본적으로 탭이 표시되지 않도록 하려면 defaultValue={null}로 설정하세요.

탭 선택 항목 동기화

같은 종류의 탭이라면 선택한 항목을 서로 동기화하기를 원할 수 있습니다. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to change all OS-specific instructions tabs in one click. 관련된 탭을 같은 groupId 속성으로 설정하면 원하는 기능을 구현할 수 있습니다. 이렇게 하면 선택한 값이 localStorage에 저장되고 같은 groupId 속성값으로 설정한 <Tab> 인스턴스는 값이 변경될 때마다 자동으로 업데이트됩니다. Note that group IDs are globally namespaced.

<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>
http://localhost:3000
Use Ctrl + C to copy.
Use Ctrl + V to paste.

같은 groupId 속성으로 설정한 모든 탭 그룹에서 사용할 수 있는 값이 똑같을 필요는 없습니다. If one tab group is chosen a value that does not exist in another tab group with the same groupId, the tab group with the missing value won't change its tab. 다음 예제가 그런 상황입니다. Try to select Linux, and the above tab groups don't change.

<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>
http://localhost:3000
I am Windows.

Tab choices with different group IDs will not interfere with each other:

<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>
http://localhost:3000
Windows in windows.
Windows is windows.

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

You might want to customize the appearance of a certain set of tabs. You can pass the string in className prop, and the specified CSS class will be added to the Tabs component:

<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>
http://localhost:3000
This is an apple 🍎

Customizing tab headings

You can also customize each tab heading independently by using the attributes field. The extra props can be passed to the headings either through the values prop in Tabs, or props of each TabItem—in the same way as you declare label.

some-doc.mdx
import styles from './styles.module.css';

<Tabs>
<TabItem value="apple" label="Apple" attributes={{className: styles.red}}>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange" attributes={{className: styles.orange}}>
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana" attributes={{className: styles.yellow}}>
This is a banana 🍌
</TabItem>
</Tabs>
styles.module.css
.red {
color: red;
}
.red[aria-selected='true'] {
border-bottom-color: red;
}

.orange {
color: orange;
}
.orange[aria-selected='true'] {
border-bottom-color: orange;
}

.yellow {
color: yellow;
}
.yellow[aria-selected='true'] {
border-bottom-color: yellow;
}
http://localhost:3000
This is an apple 🍎
tip

className would be merged with other default class names. You may also use a custom data-value field ({'data-value': 'apple'}) paired with CSS attribute selectors:

styles.module.css
li[role='tab'][data-value='apple'] {
color: red;
}