Onglets

Chaque fois que votre page propose des alternatives parallèles (gestionnaires de paquets, langages de programmation, instructions spécifiques à un OS), les onglets permettent aux lecteurs de choisir une fois et de rester dans le contexte. Les titres d'onglets correspondants se synchronisent automatiquement sur toute la page : sélectionner « yarn » dans un groupe fait basculer tous les autres groupes npm/yarn/pnpm pour correspondre.

Utilisez les onglets quand :

• Plusieurs implémentations du même concept existent (npm/yarn/pnpm, JavaScript/Python)
• Des options parallèles sont mutuellement exclusives (l'utilisateur en choisit une, pas les deux)
• La cohérence compte - le choix du lecteur doit persister sur toute la page

Utilisation

<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>

Onglets de base

<Tabs>
  <Tab title="First Tab">

    Content for the first tab.

</Tab>
  <Tab title="Second Tab">

    Content for the second tab.

</Tab>
  <Tab title="Third Tab">

    Content for the third tab.

</Tab>
</Tabs>

Onglets vs CodeGroup vs Accordion

Règle générale : Utilisez Tabs quand le choix du lecteur (comme le gestionnaire de paquets préféré) doit persister sur toute la page. Utilisez CodeGroup pour des comparaisons de code uniquement. Utilisez Accordion pour du contenu qui peut être tout pertinent.

Onglets avec icônes

Ajoutez des icônes aux titres d'onglets en utilisant les icônes Font Awesome :

function App() {
  return <h1>Hello React</h1>;
}

<Tabs>
  <Tab title="React" icon="react" iconType="brands">

    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```

</Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">

    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```

</Tab>
</Tabs>

Bordure inférieure

Utilisez la prop borderBottom pour ajouter un séparateur visuel sous le contenu de l'onglet :

<Tabs borderBottom>
  <Tab title="Overview">

    This tab group has a bottom border for visual separation.

</Tab>
  <Tab title="Details">

    Useful when tabs contain varying content lengths.

</Tab>
</Tabs>

Onglets synchronisés

Les onglets avec des titres correspondants se synchronisent automatiquement sur toute la page. Cliquez sur « yarn » dans un groupe et tous les onglets npm/yarn/pnpm de la page basculent ensemble :

Installer :

npm install my-package

Exécuter :

npm run dev

La synchronisation se produit quand les titres d'onglets correspondent (insensible à la casse).

Props

Tabs

Tab

Et ensuite ?