Aller au contenu principal
Version: 2.0.0-beta.8

Onglets

Docusaurus fournit des composants <Tabs> que vous pouvez utiliser 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>
Ceci est une pomme 🍎

Il est également possible de fournir des props values et defaultValue à 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>
Ceci est une pomme 🍎

Les props Tabs sont prioritaires sur les props TabItem :
<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>
Ceci est une pomme 🍎

astuce

Par défaut, tous les onglets sont rendus avec anticipation pendant le processus de construction, et les moteurs de recherche peuvent indexer les onglets cachés.

Il est possible de n'afficher que l'onglet par défaut avec <Tabs lazy />.

Affichage d'un onglet par défaut

Le premier onglet est affiché par défaut, et pour remplacer ce comportement, vous pouvez spécifier un onglet par défaut en ajoutant default à l'un des éléments de l'onglet. Vous pouvez également définir la propriété defaultValue du composant Tabs sur la valeur d'étiquette de votre choix. Par exemple, dans l'exemple ci-dessus, le fait de définir default pour l'onglet value="apple" ou de définir defaultValue="apple" pour les onglets force l'onglet "Apple" à être ouvert par défaut.

Docusaurus lancera une erreur si une defaultValue est fournie pour les Tabs mais qu'elle fait référence à une valeur inexistante. Si vous voulez qu'aucun des onglets ne soit affiché par défaut, utilisez defaultValue={null}.

Synchronisation des choix d'onglets

Vous pouvez souhaiter que plusieurs onglets du même type soient synchronisés les uns avec les autres. Par exemple, vous pourriez vouloir fournir des instructions différentes pour les utilisateurs de Windows et ceux de macOS, et vous voulez changer tous les onglets d'instructions spécifiques au système d'exploitation en un seul clic. Pour y parvenir, vous pouvez donner à tous les onglets liés le même prop groupId. Notez que si vous faites cela, le choix persistera dans le localStorage et toutes les instances <Tab> avec le même groupId se mettront à jour automatiquement lorsque la valeur de l'une d'entre elles sera modifiée. Notez que groupID sont des espaces de noms globaux.

<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>
Utilisez Ctrl + C pour copier.
Utilisez Ctrl + V pour coller.

Pour tous les groupes d'onglets qui ont le même groupId, les valeurs possibles ne doivent pas nécessairement être les mêmes. Si dans un groupe d'onglet une valeur choisie n'existe pas dans un autre groupe d'onglet avec le même groupId, le groupe d'onglet avec la valeur manquante ne changera pas d'onglet. Vous pouvez le voir dans l'exemple suivant. Essayez de sélectionner Linux, et les autres groupes d'onglets ci-dessus ne changeront pas.

<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>
Je suis Windows.

Les choix d'onglets avec des groupId différents n'interféreront pas les uns avec les autres :

<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>
Windows dans windows.
Windows est windows.

Personnalisation des onglets

Vous pouvez personnaliser l'apparence de certains onglets. Pour ce faire, vous pouvez passer la chaîne dans la prop className et la classe CSS spécifiée sera ajoutée au composant Tabs :

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

<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>;
Ceci est une pomme 🍎