---
title: Onglets
description: "Panneaux commutables pour du contenu mutuellement exclusif -- gestionnaires de paquets, langages, etc. Les onglets correspondants se synchronisent sur la page."
---

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

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

## Onglets de base

<Tabs>
  <Tab title="Premier onglet">
    Contenu du premier onglet.
  </Tab>
  <Tab title="Deuxième onglet">
    Contenu du deuxième onglet.
  </Tab>
  <Tab title="Troisième onglet">
    Contenu du troisième onglet.
  </Tab>
</Tabs>

```mdx
<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

| Composant | Idéal pour | Synchronisation |
|-----------|------------|-----------------|
| **Tabs** | Choix de contenu mutuellement exclusifs | Oui (sur toute la page) |
| **CodeGroup** | Blocs de code en plusieurs langages | Non |
| **Accordion** | Sections repliables, FAQ | Non |

**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 :

<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>

````mdx
<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="Aperçu">
    Ce groupe d'onglets a une bordure inférieure pour une séparation visuelle.
  </Tab>
  <Tab title="Détails">
    Utile lorsque les onglets contiennent des longueurs de contenu variables.
  </Tab>
</Tabs>

```mdx
<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 :**

<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
</Tabs>

**Exécution :**

<Tabs>
  <Tab title="npm">
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn dev
    ```
  </Tab>
</Tabs>

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

## Props

### Tabs

<ParamField name="borderBottom" type="boolean" default="false">
  Ajoute une bordure inférieure et un espacement au conteneur du contenu des onglets. Utile pour séparer visuellement le contenu en onglets du reste de la page.
</ParamField>

### Tab

<ParamField name="title" type="string" required>
  L'étiquette affichée dans la barre d'onglets. Les onglets avec des titres correspondants synchronisent automatiquement leur sélection sur toute la page.
</ParamField>

<ParamField name="icon" type="string">
  Nom de l'icône Font Awesome à afficher avant le titre (par exemple, "react", "code", "terminal").
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Style d'icône Font Awesome. Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## Prochaines étapes ?

<Columns cols={2}>
  <Card title="Aperçu des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants en MDX
  </Card>
</Columns>