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

Docusaurus provides <Tabs> components that you can use thanks to MDX:

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 🍎

It is also possible to provide values and defaultValue props to Tabs:

<Tabs  defaultValue="apple"  values={[    {label: 'Apple', value: 'apple'},    {label: 'Orange', value: 'orange'},    {label: 'Banana', value: 'banana'},  ]}>  <TabItem value="apple">이것은 사과입니다 🍎</TabItem>  <TabItem value="orange">이것은 오렌지입니다 🍊</TabItem>  <TabItem value="banana">이것은 바나나입니다 🍌</TabItem></Tabs>
This is an apple 🍎

Tabs props take precedence over the TabItem props:
<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

By default, all tabs are rendered eagerly during the build process, and search engines can index hidden tabs.

It is possible to only render the default tab with <Tabs lazy={true} />.

기본 탭 표시하기#

Add default to one of the tab items to make it displayed by default. You can also set the defaultValue prop in the Tabs component to the label value of your choice.

For example, in the example above, setting default for the value="apple" tab forces it to be open by default.

If none of the children contains the default prop, neither is the defaultValue provided for the Tabs, or it refers to an non-existing value, only the tab headings appear until the user clicks on a tab.

탭 선택 항목 동기화#

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

<Tabs groupId="operating-systems">  <TabItem value="win" label="Windows" default>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" default>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" default>    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" default>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" default>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" default>    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 🍎