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

탭

마크다운 파일 내에서 탭 형태로 콘텐츠를 보여주려면 MDX의 도움이 필요합니다. 도큐사우루스에서는 <Tabs> 컴포넌트를 바로 사용할 수 있습니다.

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<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>;

화면에 보여지는 결과는 아래와 같습니다.

이것은 사과입니다 🍎
info

기본적으로 탭은 바로 화면에 표시됩니다. 하지만 Tabs 컴포넌트 내에 lazy 속성을 설정하면 지연된 로딩도 가능합니다.

기본 탭 표시하기#

여러분이 선택한 탭에 해당하는 내용이 기본으로 표시되기 원한다면 Tabs 컴포넌트에서 defaultValue 속성을 설정하세요.

예를 들어 위에서 설명한 예처럼 defaultValue="apple"를 설정하면 기본적으로 화면을 열 때 Apple 탭을 표시합니다.

defaultValue 속성을 설정하지 않거나 유효하지 않은 값을 설정한 경우에는 사용자가 탭을 클릭하기 전까지는 탭 버튼만 표시합니다.

탭 선택 항목 동기화#

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

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">복사하기는 Ctrl + C 단축키를 사용하세요.</TabItem><TabItem value="mac">복사하기는 Command + C 단축키를 사용하세요.</TabItem></Tabs>
<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">붙여넣기는 Ctrl + V 단축키를 사용하세요.</TabItem><TabItem value="mac">붙여넣기는 Command + V 단축키를 사용하세요.</TabItem></Tabs>
복사하기는 Ctrl + C 단축키를 사용하세요.
붙여넣기는 Ctrl + V 단축키를 사용하세요.

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

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}>  <TabItem value="win">I am Windows.</TabItem>  <TabItem value="mac">I am macOS.</TabItem>  <TabItem value="linux">I am Linux.</TabItem></Tabs>
I am Windows.

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

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Windows in windows.</TabItem><TabItem value="mac">macOS is macOS.</TabItem></Tabs>
<Tabs  groupId="non-mac-operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'Unix', value: 'unix'},  ]}><TabItem value="win">Windows is windows.</TabItem><TabItem value="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"  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>;
이것은 사과입니다 🍎