버전: 2.x

탭

도큐사우루스는 MDX 덕분에 Markdown에서 사용할 수 있는 \<Tabs> 컴포넌트를 제공합니다:

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

<Tabs>
  <TabItem value="apple" label="사과" default>
    사과입니다 🍎
  </TabItem>
  <TabItem value="orange" label="오렌지">
    오렌지입니다 🍊
  </TabItem>
  <TabItem value="banana" label="바나나">
    바나나입니다 🍌
  </TabItem>
</Tabs>

http://localhost:3000

사과
오렌지
바나나

사과입니다 🍎

Tabs에 values와 defaultValue props를 전달할 수도 있습니다:

<Tabs
  defaultValue="apple"
  values={[
    {label: '사과', value: 'apple'},
    {label: '오렌지', value: 'orange'},
    {label: '바나나', value: 'banana'},
  ]}>
  <TabItem value="apple">사과입니다 🍎</TabItem>
  <TabItem value="orange">오렌지입니다 🍊</TabItem>
  <TabItem value="banana">바나나입니다 🍌</TabItem>
</Tabs>

http://localhost:3000

사과
오렌지
바나나

사과입니다 🍎

Tabs의 props는 TabItem의 props보다 우선합니다:

<Tabs
  defaultValue="apple"
  values={[
    {label: '사과 1', value: 'apple'},
    {label: '오렌지 1', value: 'orange'},
    {label: '바나나 1', value: 'banana'},
  ]}>
  <TabItem value="apple" label="사과 2">
    사과입니다 🍎
  </TabItem>
  <TabItem value="orange" label="오렌지 2">
    오렌지입니다 🍊
  </TabItem>
  <TabItem value="banana" label="바나나 2" default>
    바나나입니다 🍌
  </TabItem>
</Tabs>

http://localhost:3000

사과 1
오렌지 1
바나나 1

사과입니다 🍎

팁

기본적으로 모든 탭은 빌드 과정에서 미리 렌더링되며, 검색 엔진은 숨겨진 탭도 색인할 수 있습니다.

<Tabs lazy />를 사용하면 기본 탭만 렌더링할 수 있습니다.

기본 탭 표시하기

기본적으로 첫 번째 탭이 표시되며, 이 동작을 재정의하려면 탭 항목 중 하나에 default를 추가해 기본 탭으로 지정할 수 있습니다. Tabs 컴포넌트의 defaultValue props를 원하는 레이블 값으로 설정할 수도 있습니다. 예를 들어, 위 예에서 value="apple" 탭에 default를 설정하거나 탭 그룹에 defaultValue="apple"을 설정하면 "사과" 탭이 기본적으로 열립니다.

존재하지 않는 값을 가리키는 defaultValue를 Tabs에 전달하면 도큐사우루스가 오류를 발생시킵니다. 기본적으로 어떤 탭도 표시하지 않으려면, defaultValue={null}을 사용하세요.

탭 선택 항목 동기화

같은 종류의 탭에서 선택한 항목을 서로 동기화하고 싶을 수 있습니다. 예를 들어, Windows 사용자와 macOS 사용자에게 서로 다른 안내를 제공하고, 한 번의 클릭으로 모든 운영 체제별 안내 탭을 바꾸고 싶을 수 있습니다. 이를 위해 관련된 모든 탭에 동일한 groupId props를 지정할 수 있습니다. 이렇게 하면 선택한 값이 localStorage에 저장되며, 같은 groupId를 가진 모든 \<Tab> 인스턴스는 그중 하나의 값이 바뀔 때 자동으로 업데이트된다는 점에 유의하세요. 그룹 ID는 전역 네임스페이스를 사용한다는 점에 유의하세요.

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Ctrl + C를 사용해 복사하세요.</TabItem>
  <TabItem value="mac" label="macOS">Command + C를 사용해 복사하세요.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Ctrl + V를 사용해 붙여넣으세요.</TabItem>
  <TabItem value="mac" label="macOS">Command + V를 사용해 붙여넣으세요.</TabItem>
</Tabs>

http://localhost:3000

Windows
macOS

Ctrl + C를 사용해 복사하세요.

Windows
macOS

Ctrl + V를 사용해 붙여넣으세요.

같은 groupId를 가진 탭 그룹이라도 각 그룹에서 선택할 수 있는 값들이 동일할 필요는 없습니다. 어떤 탭 그룹에서 선택한 값이 같은 groupId를 가진 다른 탭 그룹에 없다면, 그 값이 없는 탭 그룹의 탭은 바뀌지 않습니다. 다음 예제에서 이를 확인할 수 있습니다. Linux를 선택해 보세요. 위의 탭 그룹은 바뀌지 않습니다.

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Windows입니다.
  </TabItem>
  <TabItem value="mac" label="macOS">
    macOS입니다.
  </TabItem>
  <TabItem value="linux" label="Linux">
    Linux입니다.
  </TabItem>
</Tabs>

http://localhost:3000

Windows
macOS
Linux

Windows입니다.

그룹 ID가 다른 탭의 선택은 서로 영향을 주지 않습니다:

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">창 안의 Windows.</TabItem>
  <TabItem value="mac" label="macOS">macOS는 macOS입니다.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
  <TabItem value="win" label="Windows">Windows는 창입니다.</TabItem>
  <TabItem value="unix" label="Unix">Unix는 unix입니다.</TabItem>
</Tabs>

http://localhost:3000

Windows
macOS

창 안의 Windows.

Windows
Unix

Windows는 창입니다.

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

특정 탭 그룹의 모양을 바꾸고 싶을 수 있습니다. 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">사과입니다 🍎</TabItem>
  <TabItem value="Orange">오렌지입니다 🍊</TabItem>
  <TabItem value="Banana">바나나입니다 🍌</TabItem>
</Tabs>

http://localhost:3000

Apple
Orange
Banana

사과입니다 🍎

탭 제목 사용자 지정하기

attributes 필드를 사용해 각 탭 제목을 개별적으로 사용자 정의할 수도 있습니다. 추가 props는 Tabs의 values prop이나 각 TabItem의 props를 통해 탭 제목에 전달할 수 있습니다—label을 선언하는 방식과 같습니다.

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

<Tabs>
  <TabItem value="apple" label="사과" attributes={{className: styles.red}}>
    사과입니다 🍎
  </TabItem>
  <TabItem value="orange" label="오렌지" attributes={{className: styles.orange}}>
    오렌지입니다 🍊
  </TabItem>
  <TabItem value="banana" label="바나나" attributes={{className: styles.yellow}}>
    바나나입니다 🍌
  </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

사과
오렌지
바나나

사과입니다 🍎

팁

className은 다른 기본 클래스 이름들과 합쳐집니다. 사용자 정의 data-value 필드({'data-value': 'apple'})를 CSS 속성 선택자와 함께 사용할 수도 있습니다:

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

쿼리 문자열

선택한 탭을 URL의 쿼리 매개변수에 저장할 수 있습니다. 이렇게 하면 딥링크를 사용할 수 있습니다. 페이지 로드 시 사전 선택되는 특정 탭에 대한 링크를 공유하거나 북마크를 저장할 수 있습니다.

Use the queryString prop to enable this feature and define the search param name to use.

<Tabs queryString="current-os">
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>

http://localhost:3000

Android
iOS

Android

As soon as a tab is clicked, a search parameter is added at the end of the url: ?current-os=android or ?current-os=ios.

팁

queryString can be used together with groupId.

For convenience, when the queryString prop is true, the groupId value will be used as a fallback.

<Tabs groupId="current-os" queryString>
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>

http://localhost:3000

Android
iOS

Android

When the page loads, the tab query string choice will be restored in priority over the groupId choice (using localStorage).

기본 탭 표시하기​

탭 선택 항목 동기화​

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

탭 제목 사용자 지정하기​

쿼리 문자열​

기본 탭 표시하기

탭 선택 항목 동기화

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

탭 제목 사용자 지정하기

쿼리 문자열