> 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-es/experience-components/ax-chip-container.md).
# AX - Contenedor de chips
## Resumen
**AX - Contenedor de chips** es un componente de Experience Cloud que muestra una colección de etiquetas o rótulos interactivos (chips) en las páginas de Experience Sites.
Úselo para mostrar elementos relacionados, categorías, habilidades, filtros o cualquier dato agrupado en un formato compacto y visual. Los usuarios pueden interactuar con los chips para seleccionar, quitar o desencadenar acciones. Configure el estilo y el comportamiento de los chips en Experience Builder sin código.
Perfecto para selecciones de filtros, visualización de etiquetas, distintivos de habilidades, listas de categorías o cualquier lugar donde los usuarios del portal necesiten ver e interactuar con varios elementos relacionados de forma eficiente en el uso del espacio.
## Configuración del contenedor de chips
### Configuración general
#### 1. Línea única
* **Funcionalidad:** Determina si los chips se muestran en una sola línea o si pueden ajustarse en varias líneas.
* **Uso:** Útil para mantener un diseño compacto o acomodar un mayor número de chips.
#### 2. Es plegable
* **Funcionalidad:** Permite que el contenedor de chips sea plegable.
* **Uso:** Ideal para escenarios en los que desea ahorrar espacio o gestionar la visibilidad de los chips.
#### 3. Está expandido
* **Funcionalidad:** Establece el estado inicial del contenedor de chips en expandido.
* **Uso:** Útil cuando desea que todos los chips sean inmediatamente visibles para el usuario al cargar.
### Configuración de la fuente de datos para Avonni Chip Container
El contenedor de chips Avonni ofrece dos métodos principales para la integración de datos: fuentes de datos manuales y de consulta. Cada método cumple propósitos distintos y se adapta a diferentes escenarios, que van desde mostrar datos estáticos hasta la integración dinámica de datos en tiempo real desde registros de Salesforce.
#### Origen de datos manual
* **Funcionalidad:**
* Esta configuración permite la introducción de datos directa y manual en el contenedor de chips.
* **Uso:**
* Esto es especialmente útil cuando los datos de los chips no se obtienen dinámicamente de registros de Salesforce.
* Es ideal para configuraciones iniciales, entornos de prueba o escenarios en los que se prefieren datos estáticos.
#### Fuente de datos de consulta
* **Funcionalidad:**
* La opción de consulta permite que el contenedor de chips obtenga y muestre datos de registros de Salesforce automáticamente.
* **Uso:**
* Perfecto para instancias en las que los chips necesitan poblarse dinámicamente con información actualizada de Salesforce.
* Facilita la reflexión de datos en tiempo real, lo que lo convierte en una excelente opción para sitios activos impulsados por datos.
### Asignaciones de datos para la fuente de datos de consulta
El proceso de asignación de datos es vital para la precisión y la relevancia de los datos mostrados en el contenedor de chips.
* **Proceso:**
* Implica alinear y mapear cuidadosamente los datos de los campos de Salesforce con los atributos correspondientes en el contenedor de chips. Este paso garantiza que los datos se obtengan y presenten de manera significativa y organizada.
* **Resultado:**
* Una asignación de datos adecuada garantiza que los datos recuperados de Salesforce se representen correctamente en los chips, asegurando visualizaciones significativas y contextualmente precisas.
## Ajustes de estilo
### Resumen
Personalizar el estilo del componente Avonni Chip Container es crucial para alinear su apariencia con la estética general de su sitio de Salesforce Experience Cloud. El componente ofrece una variedad de opciones de estilo que permiten una personalización detallada, garantizando tanto funcionalidad como atractivo visual.
### Opciones de espaciado
**Inicio/fin de bloque del contenedor de chips, inicio/fin en línea:**
* Estas configuraciones controlan el espaciado alrededor del contenedor de chips en orientaciones de bloque (vertical) y en línea (horizontal).
* Ajustar estos valores puede ayudar a crear el espacio visual deseado entre los chips y otros elementos, mejorando la legibilidad y la coherencia del diseño.
#### Estilo del contenedor de chips
* **Fondo, color del borde, tamaño, estilo y radio:**
* Personalice el color de fondo para que complemente o contraste con el tema del sitio.
* Las opciones de personalización del borde (color, tamaño, estilo y radio) ofrecen control sobre el contorno del contenedor, permitiendo que destaque o se integre perfectamente con otros elementos de la página.
#### Estilo individual de cada chip
* **Tamaño, peso y estilo de la fuente de la etiqueta; tamaño, estilo y radio del borde; altura de línea:**
* Ajuste con precisión la tipografía de las etiquetas de los chips para lograr claridad y alineación con la marca.
* Los ajustes del borde y de la altura de línea mejoran el impacto visual de cada chip, haciéndolos más distintivos y más fáciles de usar.
#### Personalización del avatar dentro de los chips
* **Tamaño, color y estilo del borde; color/peso de la fuente de las iniciales, color de fondo del icono, ajuste del objeto de la imagen:**
* Los avatares dentro de los chips pueden estilizarse para que coincidan con el diseño del sitio, con opciones para ajustar las propiedades del borde y las características de la fuente de las iniciales.
* Las configuraciones de 'Ajuste del objeto de la imagen' como 'rellenar', 'contener', 'cubrir', etc., son cruciales para garantizar que las imágenes del avatar se muestren correctamente sin distorsión.
#### Configuración de estilo de variantes
* **Personalizable según la variante seleccionada:**
* El componente Chip Container ofrece un estilo basado en variantes, lo que significa que se pueden aplicar distintos estilos según la variante de chip seleccionada.
* Esta función permite una mayor flexibilidad y creatividad en el diseño, asegurando que cada variante de chip pueda tener un aspecto único pero coherente dentro del contenedor.
---
# 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-es/experience-components/ax-chip-container.md?ask=&goal=
```
`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.