> 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 puces interactives 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 groupée dans un format compact et visuel. Les utilisateurs peuvent interagir avec les puces pour les sélectionner, les supprimer ou déclencher des actions. Configurez le style et le comportement des puces dans Experience Builder sans code.

Idéal 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 liés de manière peu encombrante.

## Configuration

### Paramètres généraux

#### 1. Ligne unique

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

#### 2. Peut être réduit

* **Fonctionnalité :** Permet de replier le conteneur de puces.
* **Utilisation :** Idéal pour les scénarios 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.

### Source de données

Le conteneur de puces Avonni offre deux méthodes principales d’intégration des données : Manuelle et Interrogation des sources de données. Chaque méthode répond à des besoins distincts et convient à différents scénarios, allant de l’affichage de données statiques à l’intégration dynamique de données 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ù les données statiques sont privilégiées.

#### Interroger la source de données

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

### Mappage des données

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 avec les attributs correspondants dans le 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 données récupérées depuis Salesforce sont correctement représentées dans les puces, assurant ainsi des affichages pertinents et contextuellement exacts.

## Style

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

{% tabs %}
{% tab title="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 en orientation bloc (verticale) et en ligne (horizontale).
* L’ajustement de ces valeurs peut aider à créer l’espacement visuel souhaité entre les puces et les autres éléments, améliorant ainsi la lisibilité et la cohérence de la mise en page.
  {% endtab %}

{% tab title="Conteneur de jetons" %}

* **Arrière-plan, couleur de bordure, taille, style et rayon :**
  * Personnalisez la couleur d’arrière-plan pour compléter ou contraster 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 soit de se démarquer, soit de s’intégrer harmonieusement aux autres éléments de la page.
    {% endtab %}

{% tab title="Puce individuelle" %}

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

{% tab title="Avatar" %}

* **Taille, couleur et style de la bordure ; couleur/poids de la police des initiales, couleur d’arrière-plan de l’icône, ajustement de l’objet de l’image :**
  * Les avatars intégrés aux 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 distorsion.
    {% endtab %}

{% tab title="Styles de variantes" %}

* **Personnalisable selon la variante sélectionnée :**
  * Le composant Conteneur de puces 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 créativité dans la conception, en garantissant que chaque variante de puce puisse avoir un aspect unique tout en restant cohérent à l’intérieur du conteneur.
    {% 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-chip-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.