mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
52d6c2830d
* fix: apply Vale audit vocab, rule, and prose fixes for last week * docs: mirror Vale prose fixes into es, fr, zh translations --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
142 lines
6.5 KiB
Plaintext
142 lines
6.5 KiB
Plaintext
---
|
||
title: "Onglets"
|
||
description: "Utilisez le composant tab pour organiser le contenu en panneaux commutables afin d'afficher différentes options, versions de plateforme ou exemples de langages."
|
||
keywords: ["contenu à onglets", "panneaux de contenu", "contenu commutable"]
|
||
boost: 3
|
||
---
|
||
|
||
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 dont les titres correspondent restent synchronisés sur toute la page. Par exemple, si vous avez plusieurs groupes d’onglets qui incluent un titre d’onglet `JavaScript`, le fait de sélectionner `JavaScript` dans un groupe d’onglets sélectionne automatiquement `JavaScript` dans les autres. Cela permet aux utilisateurs qui choisissent un langage ou un framework une fois de voir ce choix reflété partout. Les onglets se synchronisent également avec les [groupes de code](/fr/components/code-groups) dont les titres correspondent.
|
||
|
||
Pour désactiver la synchronisation des onglets, ajoutez `sync={false}` à un composant `<Tabs>`.
|
||
|
||
```mdx Disable tab sync example
|
||
<Tabs sync={false}>
|
||
<Tab title="Premier onglet">
|
||
Ce groupe d'onglets fonctionne de manière indépendante.
|
||
</Tab>
|
||
<Tab title="Deuxième onglet">
|
||
La sélection d'onglets ici n'affectera pas les autres groupes d'onglets.
|
||
</Tab>
|
||
</Tabs>
|
||
```
|
||
|
||
<div id="tabs-properties">
|
||
## Propriétés de Tabs
|
||
</div>
|
||
|
||
Définissez ces propriétés sur le composant conteneur `<Tabs>`.
|
||
|
||
<ResponseField name="defaultTabIndex" type="number" default="0">
|
||
L'index de l'onglet à afficher par défaut (base zéro). Par exemple, définissez-le sur `1` pour afficher le deuxième onglet au chargement de la page.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="sync" type="boolean" default="true">
|
||
Lorsque `true`, les onglets se synchronisent avec les autres onglets et groupes de code de la page dont les titres correspondent. Définissez cette valeur sur `false` pour rendre les onglets indépendants.
|
||
</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>
|
||
|
||
<ResponseField name="className" type="string">
|
||
Classes CSS supplémentaires à appliquer au conteneur des onglets.
|
||
</ResponseField>
|
||
|
||
<div id="tab-properties">
|
||
## Propriétés de Tab
|
||
</div>
|
||
|
||
Définissez ces propriétés sur chaque composant `<Tab>` individuel.
|
||
|
||
<ResponseField name="title" type="string" required>
|
||
Le titre de l'onglet. Des titres courts facilitent la navigation. Les onglets dont les titres correspondent synchronisent leurs sélections. Prend en charge la mise en forme Markdown en ligne, comme `**bold**`, `_italic_` et `` `code` ``.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="id" type="string">
|
||
Un ID personnalisé pour l'onglet, utilisé pour les liens d'ancrage. S'il n'est pas fourni, la valeur par défaut est la même que `title`.
|
||
</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="id" type="string">
|
||
Un ID personnalisé pour l’onglet, utilisé pour les liens d’ancrage. S’il n’est pas fourni, la valeur par défaut est la même que `title`.
|
||
</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="sync" type="boolean" default="true">
|
||
Lorsque `true`, les onglets se synchronisent avec les autres onglets et groupes de code de la page dont les titres correspondent. Définissez cette valeur sur `false` pour rendre les onglets indépendants.
|
||
</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>
|
||
|
||
<ResponseField name="className" type="string">
|
||
Classes CSS supplémentaires à appliquer au panneau de contenu de l’onglet. Les classes s’appliquent au panneau qui contient le contenu de l’onglet, et non au libellé de l’onglet dans la barre d’onglets.
|
||
</ResponseField> |