Tabs

Basculer le contenu à l’aide du composant Tabs

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.

First tab

☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.

Vous pouvez ajouter autant de composants que vous le souhaitez dans des onglets. Par exemple, un code block :

HelloWorld.java

  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }

Second tab

✌️ Voici du contenu qui se trouve uniquement dans le deuxième onglet.

Celui-ci a une icône  !

Third tab

💪 Voici du contenu qui se trouve uniquement dans le troisième onglet.

Tabs example

<Tabs>
  <Tab title="Premier onglet">
    ☝️ Bienvenue dans le contenu que vous ne pouvez voir que dans le premier onglet.

    Vous pouvez ajouter n'importe quel nombre de composants à l'intérieur des onglets. Par exemple, un bloc de code :
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Bonjour, le monde !");
          }
      }
    ```
  </Tab>
  <Tab title="Deuxième onglet" icon="leaf">
    ✌️ Voici le 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 le contenu qui se trouve uniquement dans le troisième onglet.
  </Tab>
</Tabs>

​

Propriétés

title · string · requis

Le titre de l’onglet. Les titres courts facilitent la navigation.

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

Uniquement pour les icônes Font Awesome : l’un de regular, solid, light, thin, sharp-solid, duotone, brands.