mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
4d96b3bfcd
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
80 lines
3.2 KiB
Plaintext
80 lines
3.2 KiB
Plaintext
---
|
||
title: "Onglets"
|
||
description: "Organisez le contenu avec des onglets pour afficher différentes options ou versions."
|
||
keywords: ["contenu à onglets", "panneaux de contenu", "contenu commutable"]
|
||
---
|
||
|
||
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.
|
||
|
||
<Tabs>
|
||
<Tab title="Premier onglet">
|
||
☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.
|
||
|
||
Vous pouvez ajouter autant de composants que vous le souhaitez à l’intérieur des onglets. Par exemple, un code block :
|
||
|
||
```java HelloWorld.java
|
||
class HelloWorld {
|
||
public static void main(String[] args) {
|
||
System.out.println("Hello, World!");
|
||
}
|
||
}
|
||
```
|
||
</Tab>
|
||
|
||
<Tab title="Deuxième onglet" icon="leaf">
|
||
✌️ Voici du 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 du contenu qui se trouve uniquement dans le troisième onglet.
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
````mdx Tabs example
|
||
<Tabs>
|
||
<Tab title="Premier onglet">
|
||
☝️ Bienvenue dans le contenu visible uniquement dans le premier onglet.
|
||
|
||
Vous pouvez ajouter autant de composants que vous le souhaitez à l'intérieur des onglets. Par exemple, un code block :
|
||
```java HelloWorld.java
|
||
class HelloWorld {
|
||
public static void main(String[] args) {
|
||
System.out.println("Hello, World!");
|
||
}
|
||
}
|
||
```
|
||
</Tab>
|
||
<Tab title="Deuxième onglet" icon="leaf">
|
||
✌️ Voici du 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 du contenu qui se trouve uniquement dans le troisième onglet.
|
||
</Tab>
|
||
</Tabs>
|
||
````
|
||
|
||
Les onglets se synchronisent automatiquement avec les autres onglets et les [groupes de code](/fr/components/code-groups) sur la même page lorsque leurs libellés sont identiques. Lorsque vous sélectionnez un onglet, tous les autres onglets et groupes de code portant le même libellé sont mis à jour pour correspondre à votre sélection.
|
||
|
||
<div id="properties">
|
||
## Propriétés
|
||
</div>
|
||
|
||
<ResponseField name="title" type="string" required>
|
||
Le titre de l’onglet. Des titres courts facilitent la navigation. Les onglets ayant des titres identiques synchronisent leurs sélections.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="icon" type="string">
|
||
Une icône [Font Awesome](https://fontawesome.com/icons), une icône [Lucide](https://lucide.dev/icons), une URL d’icône ou un chemin relatif vers une icône.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="iconType" type="string">
|
||
Pour les icônes Font Awesome uniquement : l’un de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="borderBottom" type="boolean">
|
||
Ajoute une bordure inférieure et un padding au conteneur des onglets. Utile pour séparer visuellement le contenu présenté dans des onglets du reste de la page, en particulier lorsque les onglets contiennent un contenu de longueurs variables.
|
||
</ResponseField> |