--- title: Onglets slug: docs/fr/9XUP5skTys6kjPgfdgZOP description: Apprenez à utiliser efficacement le bloc « Onglets » dans Archbee pour organiser le contenu, améliorer la lisibilité et faciliter la navigation grâce à des onglets personnalisables et cliquables. createdAt: 2024-07-24T11:17:19.316Z --- ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png) Tabs est un bloc qui vous permet d’organiser le contenu en plusieurs sections dans un seul document. C’est comme un ensemble d’onglets sur lesquels vous pouvez cliquer pour afficher différentes informations. Pensez-y comme un moyen de créer plusieurs pages au sein d’une seule page. ## Pourquoi l’utiliser - **Organiser du contenu complexe** - Regroupez le contenu lié dans des onglets séparés pour une meilleure structure et lisibilité. - **Améliorer la lisibilité** - Rendez votre contenu plus facile à parcourir et à comprendre. - **Gagner de la place** - Utilisez efficacement l’espace en affichant le contenu de manière séquentielle plutôt que tout en même temps. - **Créer des expériences interactives** Impliquez les utilisateurs en leur permettant de choisir activement les informations qu’ils souhaitent voir. ## Comment utiliser le bloc Tabs ::::::WorkflowBlock :::WorkflowBlockItem Tapez `/` pour ouvrir le menu de blocs Archbee ::: :::WorkflowBlockItem Recherchez le bloc **Onglets** et cliquez pour l’insérer ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png) ::: :::WorkflowBlockItem Personnalisez vos onglets et leurs noms. Par défaut, le bloc est créé avec 2 onglets nommés "Tab Name" et "Second Tab Name". Pour renommer un onglet, vous devez entrer en mode d’édition du label en : - Double-cliquant sur le label de l’onglet - Ou en appuyant sur l’icône "Edit label" ( :FontAwesome[]{icon="fa-solid fa-pen-to-square"} ) Appuyez sur enregistrer ( :FontAwesome[]{icon="fa-solid fa-check"} ) pour mettre à jour le label, ou appuyez sur annuler ( **↩** ) pour annuler les modifications. ::: :::::WorkflowBlockItem N’hésitez pas à ajouter votre contenu. Vous pouvez styliser le contenu comme vous le souhaitez en utilisant le [WYSIWYG Menu](#) ou même insérer d'autres blocs, comme : ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem Blocs de base - [Titres](docId\:m5YtbqSdP8r5-Mf8qZ06o) - [En-têtes extensibles](docId\:vzJtGjqibvOm7Liy_MlxO) - [Listes](docId\:nPfcEoI9K08-yMLuZK7Fh) - [Table](docId:66lbkvBbdaa9_4_JVMFG9) - [Bouton](docId:3nU6V7-dlt4mIBEHdZb-Z) - [Avertissement](docId\:OL_gxdn7xBLaPFqLQ3n-7) - [Séparateur horizontal](docId\:nCxSX6BbAvR5tG3MPNYwH) - [Fractionnement vertical](docId\:cKaJRQ6clkSLLqRBaK4qJ) - [Minitaskers](docId\:JbJU857BtqOt2Y7K3l3PV) - [Grille de liens](docId\:PK8vQQlHhl75RrAs1X5so) - [Workflow](docId:5dOnYhRH_w9oemTn4LwH4) ::: :::LinkArrayItem Blocs média - [Fichier](docId:_NnUvECpV1i_8pS-sS1h-) - [Image](docId\:TPn9FZo6lfXo2lMviwCWj) - [Vidéo](docId\:GQ9-sKSwAguEEbpshXf6u) - [Carte](docId:0Th8Fda7i1_Nt7eFmFeKT) ::: :::LinkArrayItem Blocs développeur - [Éditeur de code : multilingue](docId:9h6qJpsLDGr0J3o9xDD8K) - [Diagrammes Mermaid](docId\:l9rLmv24R1893CG69dX0i) - [Équation TeX](docId\:ALGPDJ4J-i7-dQKBNccl8) - [Points de terminaison API](docId\:ZXjD4W7ZYzxr8iTXSz7eF) - [OpenAPI/Swagger](docId\:aPEZPEL6OPmcYWUHMjLc8) - [Journal des modifications](docId\:tiaZTiQw00-ZDjHyH0Crz) ::: :::: De plus, la plupart de nos intégrations fonctionnent à l’intérieur d’un bloc à onglets. Vous pouvez ajouter des intégrations provenant d’autres outils comme Loom, Figma, Miro, Lucidcharts, et plus encore. Consultez la page [Blocs intégrés.](docId\:tQv8z09d0Qm9bwpWCW8s8) pour plus d’informations. ::::: :::::: ## Markdown Voici comment créer un onglet dans votre document en utilisant du code markdown : :::::WorkflowBlock :::WorkflowBlockItem Commencez avec la ligne `:::tabs`. ::: ::::WorkflowBlockItem Le contenu de chaque onglet se place entre les marqueurs `:::tab` et `:::`. :::hint{type="warning"} **🚨 Attention !** Un deux-points `:` doit être placé dans un élément parent markdown pour indiquer qu’il englobe un autre élément markdown. ::: Dans ce cas, `:::tabs` deviendra `::::tabs` . Donnez un titre à chaque onglet avec des accolades comme `{title="Le nom de votre section"}`. C’est le nom qui apparaîtra dans l’en-tête de l’onglet. :::: :::WorkflowBlockItem Placez le contenu souhaité dans cet onglet entre ces lignes. Voir ci-dessus les blocs autorisés à utiliser dans un bloc d’onglets. Consultez la page [Raccourcis Markdown](docId\:KNz2rYwFSXk8e_9SX8G_G) pour voir comment utiliser d’autres blocs avec markdown. ::: :::WorkflowBlockItem Créez autant d’onglets que vous le souhaitez et fermez votre bloc d’onglets. N’oubliez pas d’ajouter des colonnes pour chaque niveau imbriqué. Voici ci-dessous un exemple de bloc d’onglets utilisant markdown. ::: ::::: ```markdown ## Tabs :::::tabs ::::tab{title="Tab 1"} Some content for Tab 1 :::hint{style="info"} Pull requests are very welcome! Please see CONTRIBUTING.md for more information. Tthis is really nice ::: - [x] This is a checkbox list - [x] This is a checkbox list - [ ] This is done - [ ] This is a checkbox list :::: :::tab{title="Tab Photos"} ![](https://placehold.co/600x400) We would love you to contributeaaa ::: ::::: ``` Voici le résultat : :::::Tabs ::::Tab{title="Onglet 1"} Du contenu pour l’onglet 1 :::hint{type="info" attributes="{"style":"info"}"} Les pull requests sont les bienvenues ! Veuillez consulter CONTRIBUTING.md pour plus d’informations. C’est vraiment bien ::: - [x] Ceci est une liste à cocher - [x] Ceci est une liste à cocher - [ ] Ceci est fait - [ ] Ceci est une liste à cocher :::: :::Tab{title="Onglet Photos"} ::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"} Nous serions ravis que vous contribuiez aaa ::: ::::: Vous pouvez également utiliser cette variante de Markdown pour générer un bloc d’onglets. ```markdown {% tabs %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% endtabs %} ``` Consultez la page [Raccourcis Markdown](docId\:KNz2rYwFSXk8e_9SX8G_G) pour voir plus de raccourcis markdown pour d’autres blocs. ## Exemples Voir sur [page de scission verticale, sections d’exemples.](docId\:cKaJRQ6clkSLLqRBaK4qJ) *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Trouver d’autres blocs** Découvrez de nouvelles façons et de nouveaux blocs pour créer des pages de documentation impressionnantes et fonctionnelles. [Voir tous les blocs](docId\:oSw7o7IGH93-6KHkyg-eL) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** Besoin d’aide ? ⬇️** Utilisez la **bulle** **de chat bleue **dans le coin inférieur droit. Ou essayez **Chat IA** (depuis la barre de recherche) pour obtenir des réponses rapides. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Votre opinion compte** Utilisez le formulaire de rétroaction ci-dessous, anonymement. Ou posez une question dans la **section Q\&R** et notre équipe ou l’IA vous fournira une solution. ::: ::::