> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tabs.md).

# AX - Onglets

## Aperçu

**AX - Onglets** est un composant Experience Cloud qui organise le contenu en onglets étiquetés sur les pages des sites Experience, permettant aux utilisateurs du portail de passer d’une section à l’autre sans quitter la page.

Utilisez-le pour organiser du contenu مرتبط qui n’a pas besoin d’être visible en même temps — comme les détails d’un produit répartis sur plusieurs onglets, des formulaires en plusieurs sections, des ressources classées par catégorie ou des informations regroupées. Choisissez une disposition d’onglets horizontale ou verticale et configurez le style dans Experience Builder.

Parfait pour les pages d’informations produit, les formulaires en plusieurs étapes, les catégories de ressources, les sections de compte ou partout où votre portail doit organiser le contenu en vues commutables.

{% hint style="danger" %}
Ce composant [utilise des emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-slots) pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.
{% endhint %}

## Tutoriels

Bientôt disponible

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Nom                                                                                    | Description                                                                                                                                                                              | Utilisation                                                                                                                                                                                                      |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Orientation**                                                                        | Définissez l’orientation des onglets en choisissant entre une disposition horizontale ou verticale.                                                                                      | Sélectionnez l’orientation qui correspond le mieux à vos besoins de conception, en optimisant la disposition pour la navigation des utilisateurs et la visibilité du contenu.                                    |
| **Délimité**                                                                           | Activez le style délimité pour appliquer un style plus ciblé et spécifique aux onglets.                                                                                                  | Utilisez cette fonctionnalité pour appliquer des styles limités au composant, évitant ainsi les conflits de style involontaires avec d’autres éléments de la page.                                               |
| **Défilable et boutons de défilement**                                                 | Rendez les onglets défilables et gérez la visibilité des boutons de défilement, afin de garantir une navigation facile même avec un grand nombre d’onglets.                              | Configurez les fonctionnalités de défilement en fonction du nombre et de la disposition des onglets, afin que les utilisateurs puissent facilement accéder à tous les onglets disponibles et naviguer entre eux. |
| **Image d’arrière-plan du contenu du CMS ou URL de l’image d’arrière-plan du contenu** | Personnalisez l’arrière-plan de la zone de contenu des onglets en choisissant une image depuis le CMS ou en fournissant une URL.                                                         | Améliorez l’attrait visuel de vos onglets en appliquant une image d’arrière-plan qui complète la conception globale et la présentation du contenu.                                                               |
| **Source de données**                                                                  | Définissez la source des libellés et du contenu des onglets, ce qui permet de configurer manuellement les propriétés des onglets telles que les libellés, les icônes et les info-bulles. | Utilisez cette fonctionnalité pour personnaliser les données des onglets, en vous assurant que chaque onglet est correctement nommé et enrichi d’icônes ou d’info-bulles selon les besoins.                      |
| {% endtab %}                                                                           |                                                                                                                                                                                          |                                                                                                                                                                                                                  |

{% tab title="🎨 Style" %}

| Nom                                        | Description                                                                                                                                                     |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Paramètres de taille**                   | Définissez la largeur et la hauteur des onglets, afin qu’ils s’intègrent parfaitement à votre mise en page.                                                     |
| **Styles d’arrière-plan et de bordure**    | Personnalisez les arrière-plans et les bordures avec des options comme les couleurs et les tailles, afin de renforcer la distinction visuelle de chaque onglet. |
| **Styles des onglets**                     | Ajustez divers aspects tels que l’alignement vertical, la largeur, la hauteur et l’espacement pour affiner l’apparence et la disposition des onglets.           |
| **Styles des libellés et des sous-titres** | Adaptez l’apparence du texte dans les onglets en appliquant des couleurs et des styles de police pour améliorer la lisibilité et l’attrait esthétique.          |
| **Styles du bouton de débordement**        | Personnalisez l’apparence du bouton de débordement en ajustant les couleurs du texte et de l’arrière-plan pour une cohérence visuelle.                          |
| {% endtab %}                               |                                                                                                                                                                 |
| {% endtabs %}                              |                                                                                                                                                                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
