Aller au contenu principal
Version: 2.0.0-beta.5 🚧

Onglets

Pour afficher du contenu sous forme d'onglets dans les fichiers Markdown, vous pouvez vous rabattre sur MDX. Docusaurus fournit des composants <Tabs> prêts à l'emploi.

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">Ceci est une pomme 🍎</TabItem>  <TabItem value="orange">Ceci est une 🍊</TabItem>  <TabItem value="banana">Ceci est une banane 🍌</TabItem></Tabs>;

Et vous obtiendrez les éléments suivants :

Ceci est une pomme 🍎
info

Par défaut, les onglets sont rendus de manière anticipée, mais il est possible de les charger de manière paresseuse (« lazy load ») en passant la prop lazy au composant Tabs.

Affichage d'un onglet par défaut#

Définissez la prop defaultValue du composant Tabs sur la « value » de votre choix pour afficher par défaut l'onglet correspondant.

Par exemple, dans l'exemple ci-dessus, defaultValue="apple" force l'onglet Apple à être ouvert par défaut.

Si la prop defaultValue n'est pas fournie ou fait référence à une valeur inexistante, seuls les titres des onglets apparaissent jusqu'à ce que l'utilisateur clique sur un onglet.

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"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Utilisez Ctrl + C pour copier.</TabItem><TabItem value="mac">Utilisez Commande + C pour copier.</TabItem></Tabs>
<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Utilisez Ctrl + V pour coller.</TabItem><TabItem value="mac">Utilisez Commande + 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"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}>  <TabItem value="win">je suis Windows.</TabItem>  <TabItem value="mac">je suis macOS.</TabItem>  <TabItem value="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"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Windows dans windows.</TabItem><TabItem value="mac">macOS est macOS.</TabItem></Tabs>
<Tabs  groupId="non-mac-operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'Unix', value: 'unix'},  ]}><TabItem value="win">Windows est windows.</TabItem><TabItem value="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"  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 🍊</TabItem>  <TabItem value="banana">Ceci est une banane 🍌</TabItem></Tabs>;
Ceci est une pomme 🍎