Passer au contenu principal
Utilisez des onglets pour organiser le contenu en plusieurs panneaux entre lesquels les utilisateurs peuvent basculer. Vous pouvez ajouter autant d’onglets que nécessaire et inclure d’autres composants dans chaque onglet.
☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.Vous pouvez ajouter autant de composants que vous le souhaitez à l’intérieur des onglets. Par exemple, un code block :
HelloWorld.java
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
Tabs example
<Tabs>
  <Tab title="Premier onglet">
    ☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.

    Vous pouvez ajouter autant de composants que vous le souhaitez à l'intérieur des onglets. Par exemple, un code block :
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>
  <Tab title="Deuxième onglet" icon="leaf">
    ✌️ Voici du contenu qui se trouve uniquement dans le deuxième onglet.

    Celui-ci a une icône <Icon icon="leaf" /> !
  </Tab>
  <Tab title="Troisième onglet">
    💪 Voici du contenu qui se trouve uniquement dans le troisième onglet.
  </Tab>
</Tabs>
Les onglets dont les titres correspondent restent synchronisés sur toute la page. Par exemple, si vous avez plusieurs groupes d’onglets qui incluent un titre d’onglet JavaScript, le fait de sélectionner JavaScript dans un groupe d’onglets sélectionne automatiquement JavaScript dans les autres. Cela permet aux utilisateurs qui choisissent un langage ou un framework une fois de voir ce choix reflété partout. Les onglets se synchronisent également avec les groupes de code dont les titres correspondent. Pour désactiver la synchronisation des onglets, ajoutez sync={false} à un composant <Tabs>.
Disable tab sync example
<Tabs sync={false}>
  <Tab title="Premier onglet">
    Ce groupe d'onglets fonctionne de manière indépendante.
  </Tab>
  <Tab title="Deuxième onglet">
    La sélection d'onglets ici n'affectera pas les autres groupes d'onglets.
  </Tab>
</Tabs>

​
Propriétés

​
title
string
requis
Le titre de l’onglet. Des titres courts facilitent la navigation. Les onglets ayant des titres identiques synchronisent leurs sélections.
​
icon
string
Une icône Font Awesome, une icône Lucide, une URL d’icône ou un chemin relatif vers une icône.
​
iconType
string
Pour les icônes Font Awesome uniquement : l’un de regular, solid, light, thin, sharp-solid, duotone, brands.
​
sync
boolean
défaut:"true"
Lorsque true, les onglets se synchronisent avec les autres onglets et groupes de code de la page ayant des titres identiques. Définissez cette valeur sur false pour rendre les onglets indépendants.
​
borderBottom
boolean
Ajoute une bordure inférieure et un padding au conteneur des onglets. Utile pour séparer visuellement le contenu présenté dans des onglets du reste de la page, en particulier lorsque les onglets contiennent un contenu de longueurs variables.