---
title: Onglets
slug: docs/fr/onglets
createdAt: 2026-06-05T14:35:37.593Z
---

[Onglets](docId:4lK3iqUD5wfhH7fLtKXOf) organisent du contenu connexe en panneaux interchangeables. Ils sont utiles pour présenter des exemples dans plusieurs langages de programmation, frameworks, systèmes d’exploitation ou flux de travail alternatifs sans augmenter la longueur de la page.

## Syntaxe

Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

Chaque `Onglet` nécessite une propriété `titre`, qui est affichée comme l’étiquette de l’onglet. Vous pouvez placer tout contenu Markdown ou MDX pris en charge dans un onglet, y compris du texte, des images, des tableaux, des blocs de code et d’autres composants.

## Exemple MDX

L’exemple suivant crée trois onglets contenant des extraits de code équivalents dans différents langages de programmation.

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````