> 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-chip-container.md).

# AX - Conteneur de puces

## Aperçu

**AX - Conteneur de puces** est un composant Experience Cloud qui affiche une collection d’étiquettes ou de balises interactives (puces) sur les pages des sites Experience.

Utilisez-le pour afficher des éléments associés, des catégories, des compétences, des filtres ou toute donnée regroupée dans un format compact et visuel. Les utilisateurs peuvent interagir avec les puces pour sélectionner, supprimer ou déclencher des actions. Configurez le style et le comportement des puces dans Experience Builder sans code.

Parfait pour les sélections de filtres, l’affichage de balises, les badges de compétences, les listes de catégories ou partout où les utilisateurs du portail doivent voir et interagir avec plusieurs éléments associés de manière peu encombrante.

## Configuration du conteneur de puces

### Paramètres généraux

#### 1. Ligne unique

* **Fonctionnalité :** Détermine si les puces sont affichées sur une seule ligne ou peuvent revenir à la ligne sur plusieurs lignes.
* **Utilisation :** Utile pour conserver une mise en page compacte ou pour accueillir un nombre plus important de puces.

#### 2. Est réductible

* **Fonctionnalité :** Permet au conteneur de puces d’être réductible.
* **Utilisation :** Idéal dans les cas où vous souhaitez économiser de l’espace ou gérer la visibilité des puces.

#### 3. Est développé

* **Fonctionnalité :** Définit l’état initial du conteneur de puces sur développé.
* **Utilisation :** Utile lorsque vous souhaitez que toutes les puces soient immédiatement visibles pour l’utilisateur au chargement.

### Configuration de la source de données pour Avonni Chip Container

Le conteneur de puces Avonni propose deux méthodes principales d’intégration des données : saisie manuelle et source de données par requête. Chaque méthode répond à des besoins distincts et convient à différents scénarios, allant des affichages de données statiques à l’intégration de données dynamiques en temps réel à partir d’enregistrements Salesforce.

<figure><img src="/files/a247480fbe2849d1457bfa80d9713c4bf9e0d118" alt="" width="375"><figcaption></figcaption></figure>

#### Source de données manuelle

* **Fonctionnalité :**
  * Ce paramètre permet une saisie directe et manuelle des données dans le conteneur de puces.
* **Utilisation :**
  * C’est particulièrement utile lorsque les données des puces ne proviennent pas dynamiquement d’enregistrements Salesforce.
  * C’est idéal pour les configurations initiales, les environnements de test ou les scénarios où des données statiques sont préférées.

#### Source de données par requête

* **Fonctionnalité :**
  * L’option de requête permet au conteneur de puces de récupérer et d’afficher automatiquement les données des enregistrements Salesforce.
* **Utilisation :**
  * Parfait pour les cas où les puces doivent être alimentées dynamiquement avec des informations à jour provenant de Salesforce.
  * Facilite la mise à jour des données en temps réel, ce qui en fait un excellent choix pour les sites actifs et pilotés par les données.

### Mappages de données pour la source de données par requête

Le processus de mappage des données est essentiel pour garantir l’exactitude et la pertinence des données affichées dans le conteneur de puces.

* **Processus :**
  * Il consiste à aligner et mapper soigneusement les données des champs Salesforce vers les attributs correspondants du conteneur de puces. Cette étape garantit que les données sont récupérées et présentées de manière pertinente et organisée.
* **Résultat :**
  * Un mappage correct des données garantit que les informations récupérées depuis Salesforce sont correctement représentées dans les puces, assurant ainsi des affichages pertinents et contextuellement exacts.

## Paramètres de style

### Aperçu

La personnalisation du style du composant Avonni Chip Container est essentielle pour aligner son apparence avec l’esthétique générale de votre site Salesforce Experience Cloud. Le composant offre une gamme d’options de style permettant une personnalisation détaillée, garantissant à la fois la fonctionnalité et l’attrait visuel.

### Options d’espacement

**Début/fin du bloc du conteneur de puces, début/fin en ligne :**

* Ces paramètres contrôlent l’espacement autour du conteneur de puces dans les orientations bloc (verticale) et en ligne (horizontale).
* Ajuster ces valeurs peut aider à créer l’espace visuel souhaité entre les puces et les autres éléments, améliorant ainsi la lisibilité et la cohérence de la mise en page.

#### Style du conteneur de puces

* **Arrière-plan, couleur de bordure, taille, style et rayon :**
  * Personnalisez la couleur d’arrière-plan pour qu’elle complète ou contraste avec le thème du site.
  * Les options de personnalisation de la bordure (couleur, taille, style et rayon) offrent un contrôle sur le contour du conteneur, lui permettant de se démarquer ou de s’intégrer harmonieusement aux autres éléments de la page.

#### Style des puces individuelles

* **Taille de police de l’étiquette, poids, style ; taille de bordure, style, rayon ; hauteur de ligne :**
  * Ajustez finement la typographie des étiquettes des puces pour plus de clarté et d’alignement avec la marque.
  * Les ajustements de bordure et de hauteur de ligne renforcent l’impact visuel de chaque puce, les rendant plus distinctes et plus faciles à utiliser.

#### Personnalisation des avatars dans les puces

* **Taille de bordure, couleur, style ; couleur/poids de police des initiales, couleur d’arrière-plan de l’icône, ajustement de l’objet de l’image :**
  * Les avatars dans les puces peuvent être stylisés pour correspondre au design du site, avec des options permettant d’ajuster les propriétés de la bordure et les caractéristiques typographiques des initiales.
  * Les paramètres « Ajustement de l’objet de l’image » tels que « remplir », « contenir », « couvrir », etc., sont essentiels pour garantir que les images d’avatar s’affichent correctement sans déformation.

#### Paramètres de style des variantes

* **Personnalisable selon la variante sélectionnée :**
  * Le composant Chip Container offre un style basé sur les variantes, ce qui signifie que différents styles peuvent être appliqués en fonction de la variante de puce sélectionnée.
  * Cette fonctionnalité offre une plus grande flexibilité et davantage de créativité dans la conception, en garantissant que chaque variante de puce puisse avoir un aspect unique tout en restant cohérent au sein du conteneur.<br>


---

# 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-chip-container.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.
