탭
Docusaurus provides the <Tabs>
component that you can use in Markdown 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>
- Apple
- Orange
- Banana
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">This is an apple 🍎</TabItem>
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
- Apple
- Orange
- Banana
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>
- Apple 1
- Orange 1
- Banana 1
기본적으로 모든 탭은 빌드 단계에서 빠르게 렌더링되며 검색 엔진은 숨겨진 탭까지 색인 처리합니다.
It is possible to only render the default tab with <Tabs lazy />
.
Displaying a default tab
The first tab is displayed by default, and to override this behavior, you can specify a default tab by adding default
to one of the tab items. You can also set the defaultValue
prop of the Tabs
component to the label value of your choice. For example, in the example above, either setting default
for the value="apple"
tab or setting defaultValue="apple"
for the tabs forces the "Apple" tab to be open by default.
Docusaurus will throw an error if a defaultValue
is provided for the Tabs
but it refers to a non-existing value. If you want none of the tabs to be shown by default, use defaultValue={null}
.
Syncing tab choices
같은 종류의 탭이라면 선택한 항목을 서로 동기화하기를 원할 수 있습니다. 예를 들어 윈도와 macOS 사용자에게 다른 사용법을 가이드하는 경우 한 번의 클릭으로 탭에서 선택한 운영체제를 변경하고 싶을 수 있습니다. To achieve that, you can give all related tabs the same groupId
prop. Note that doing this will persist the choice in localStorage
and all <Tab>
instances with the same groupId
will update automatically when the value of one of them is changed. group ID는 전역 네임스페이스입니다.
<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>
- Windows
- macOS
- Windows
- macOS
For all tab groups that have the same groupId
, the possible values do not need to be the same. 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. 다음 예제가 그런 상황입니다. 탭에서 리눅스 항목을 선택해도 위에 있는 탭은 변경되지 않는 것을 확인할 수 있습니다.
<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>
- Windows
- macOS
- Linux
group ID 속성값이 다른 탭은 서로 영향을 미치지 않습니다.
<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
- macOS
- Windows
- Unix
Customizing 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>
- Apple
- Orange
- Banana
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
.
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>
.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;
}
- Apple
- Orange
- Banana
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:
li[role='tab'][data-value='apple'] {
color: red;
}
Query string
선택한 탭을 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>
- Android
- iOS
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>
- Android
- iOS
When the page loads, the tab query string choice will be restored in priority over the groupId
choice (using localStorage
).