Aller au contenu principal
Version : Canary 🚧

Onglets

Docusaurus fournit le composant <Tabs> que vous pouvez utiliser dans Markdown grâce à MDX :

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

<Tabs>
<TabItem value="apple" label="Apple" default>
Ceci est une pomme 🍎
</TabItem>
<TabItem value="orange" label="Orange">
Ceci est une orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
Ceci est une banane 🍌
</TabItem>
</Tabs>
http://localhost:3000
Ceci est une pomme 🍎

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">Ceci est une pomme 🍎</TabItem>
<TabItem value="orange">Ceci est une orange 🍊</TabItem>
<TabItem value="banana">Ceci est une banane 🍌</TabItem>
</Tabs>
http://localhost:3000
Ceci est une pomme 🍎
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">
Ceci est une pomme 🍎
</TabItem>
<TabItem value="orange" label="Orange 2">
Ceci est une orange 🍊
</TabItem>
<TabItem value="banana" label="Banana 2" default>
Ceci est une banane 🍌
</TabItem>
</Tabs>
http://localhost:3000
Ceci est une pomme 🍎
astuce

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 />.

Affichage d'un onglet par défaut

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}.

Synchronisation des choix d'onglets

You may want choices of the same kind of tabs to sync with each other. 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. 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. Note that group IDs are globally namespaced.

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Utilisez Ctrl + C pour copier.</TabItem>
<TabItem value="mac" label="macOS">Utilisez Command + C pour copier.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Utilisez Ctrl + V pour coller.</TabItem>
<TabItem value="mac" label="macOS">Utilisez Command + V pour coller.</TabItem>
</Tabs>
http://localhost:3000
Utilisez Ctrl + C pour copier.
Utilisez Ctrl + V pour coller.

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. You can see that from the following example. Try to select Linux, and the above tab groups don't change.

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">
Je suis Windows.
</TabItem>
<TabItem value="mac" label="macOS">
Je suis macOS.
</TabItem>
<TabItem value="linux" label="Linux">
Je suis Linux.
</TabItem>
</Tabs>
http://localhost:3000
Je suis Windows.

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

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Windows dans windows.</TabItem>
<TabItem value="mac" label="macOS">macOS est macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
<TabItem value="win" label="Windows">Windows est windows.</TabItem>
<TabItem value="unix" label="Unix">Unix est unix.</TabItem>
</Tabs>
http://localhost:3000
Windows dans windows.
Windows est windows.

Personnalisation des onglets

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">Ceci est une pomme 🍎</TabItem>
<TabItem value="Orange">Ceci est une orange 🍊</TabItem>
<TabItem value="Banana">Ceci est une banane 🍌</TabItem>
</Tabs>
http://localhost:3000
Ceci est une pomme 🍎

Personnalisation des entêtes d'onglets

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="Pomme" attributes={{className: styles.red}}>
Ceci est une pomme 🍎
</TabItem>
<TabItem value="orange" label="Orange" attributes={{className: styles.orange}}>
Ceci est une orange 🍊
</TabItem>
<TabItem value="banana" label="Banane" attributes={{className: styles.yellow}}>
Ceci est une banane 🍌
</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
Ceci est une pomme 🍎
astuce

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;
}

Query string

It is possible to persist the selected tab into the url search parameters. This enables deep linking: the ability to share or bookmark a link to a specific tab, that will be pre-selected when the page loads.

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

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.

astuce

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

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