Onglets

Lorsque 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, de sorte que sélectionner "yarn" dans un groupe bascule tous les autres groupes npm/yarn/pnpm pour correspondre.

Utilisez les onglets lorsque :

• Plusieurs implémentations du même concept existent (npm/yarn/pnpm, JavaScript/Python)
• Les options parallèles sont mutuellement exclusives (les utilisateurs en choisissent une, pas les deux)
• La cohérence est importante - le choix du lecteur doit persister tout au long de 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 les onglets lorsque le choix du lecteur (comme le gestionnaire de paquets préféré) doit persister tout au long de la page. Utilisez CodeGroup pour les comparaisons de code uniquement. Utilisez Accordion pour le contenu qui peut être tout pertinent.

Onglets avec icônes

Ajoutez des icônes aux titres des 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 des onglets :

<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 la page. Cliquez sur "yarn" dans un groupe et tous les onglets npm/yarn/pnpm de la page basculent ensemble :

Installation :

npm install my-package

Exécution :

npm run dev

La synchronisation se produit lorsque les titres des onglets correspondent (insensible à la casse).

Props

Tabs

Tab

Prochaines étapes ?