> 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-it/experience-components/ax-chip-container.md). # AX - Contenitore di chip ## Panoramica **AX - Contenitore di chip** è un componente di Experience Cloud che visualizza una raccolta di tag o etichette interattivi (chip) nelle pagine di Experience Sites. Usalo per mostrare elementi correlati, categorie, competenze, filtri o qualsiasi dato raggruppato in un formato compatto e visivo. Gli utenti possono interagire con i chip per selezionare, rimuovere o attivare azioni. Configura lo stile e il comportamento dei chip in Experience Builder senza codice. Perfetto per selezioni di filtri, visualizzazione di tag, badge di competenze, elenchi di categorie o ovunque gli utenti del portale debbano vedere e interagire con più elementi correlati in modo efficiente nello spazio. ## Configurazione del Contenitore di chip ### Impostazioni generali #### 1. Riga singola * **Funzionalità:** Determina se i chip vengono visualizzati su una singola riga o possono andare a capo su più righe. * **Utilizzo:** Utile per mantenere un layout compatto o per ospitare un numero maggiore di chip. #### 2. È comprimibile * **Funzionalità:** Consente di comprimere il contenitore di chip. * **Utilizzo:** Ideale per scenari in cui si desidera risparmiare spazio o gestire la visibilità dei chip. #### 3. È espanso * **Funzionalità:** Imposta lo stato iniziale del contenitore di chip come espanso. * **Utilizzo:** Utile quando si desidera che tutti i chip siano immediatamente visibili all'utente al caricamento. ### Configurazione della sorgente dati per Avonni Chip Container Avonni Chip Container offre due metodi principali per l'integrazione dei dati: Manuale e Sorgenti dati di query. Ogni metodo serve a scopi distinti ed è adatto a scenari diversi, che vanno da visualizzazioni di dati statici all'integrazione dinamica e in tempo reale dei dati dai record Salesforce.
#### Origine dati manuale * **Funzionalità:** * Questa impostazione consente l'inserimento diretto e manuale dei dati nel Chip Container. * **Utilizzo:** * Ciò è particolarmente utile quando i dati dei chip non provengono dinamicamente dai record Salesforce. * È ideale per configurazioni iniziali, ambienti di test o scenari in cui si preferiscono dati statici. #### Sorgente dati di query * **Funzionalità:** * L'opzione di query consente al Chip Container di recuperare e visualizzare automaticamente i dati dai record Salesforce. * **Utilizzo:** * Perfetto per i casi in cui i chip devono essere popolati dinamicamente con informazioni aggiornate da Salesforce. * Facilita la visualizzazione dei dati in tempo reale, rendendolo una scelta eccellente per siti attivi e basati sui dati. ### Mappature dati per la sorgente dati di query Il processo di mappatura dei dati è fondamentale per l'accuratezza e la pertinenza dei dati visualizzati nel Chip Container. * **Processo:** * Prevede di allineare e mappare con attenzione i dati dei campi Salesforce agli attributi corrispondenti nel Chip Container. Questo passaggio garantisce che i dati vengano recuperati e presentati in modo significativo e organizzato. * **Risultato:** * Una corretta mappatura dei dati garantisce che i dati recuperati da Salesforce siano rappresentati correttamente nei chip, assicurando visualizzazioni significative e contestualmente accurate. ## Impostazioni di stile ### Panoramica Personalizzare lo stile del componente Avonni Chip Container è fondamentale per allinearne l'aspetto all'estetica generale del sito Salesforce Experience Cloud. Il componente offre una gamma di opzioni di stile che consentono una personalizzazione dettagliata, garantendo sia funzionalità sia appeal visivo. ### Opzioni di spaziatura **Inizio/Fine blocco del contenitore di chip, Inizio/Fine in linea:** * Queste impostazioni controllano la spaziatura attorno al contenitore di chip nelle orientazioni a blocco (verticale) e in linea (orizzontale). * Regolare questi valori può aiutare a creare il margine visivo desiderato tra i chip e gli altri elementi, migliorando la leggibilità e la coerenza del layout. #### Stile del contenitore di chip * **Sfondo, colore del bordo, dimensione, stile e raggio:** * Personalizza il colore di sfondo per armonizzarlo o creare contrasto con il tema del sito. * Le opzioni di personalizzazione del bordo (colore, dimensione, stile e raggio) offrono il controllo sul contorno del contenitore, permettendogli di risaltare o fondersi perfettamente con altri elementi della pagina. #### Stile dei singoli chip * **Dimensione del carattere dell'etichetta, peso, stile; dimensione del bordo, stile, raggio; altezza della linea:** * Affina la tipografia delle etichette dei chip per chiarezza e coerenza con il brand. * Le regolazioni del bordo e dell'altezza della linea migliorano l'impatto visivo di ogni chip, rendendoli più distinti e più semplici da usare. #### Personalizzazione dell'avatar all'interno dei chip * **Dimensione, colore e stile del bordo; colore/peso del carattere delle iniziali, colore di sfondo dell'icona, adattamento dell'immagine:** * Gli avatar all'interno dei chip possono essere stilizzati per adattarsi al design del sito, con opzioni per regolare le proprietà del bordo e le caratteristiche tipografiche delle iniziali. * Le impostazioni di 'Adattamento dell'oggetto immagine' come 'fill', 'contain', 'cover', ecc. sono fondamentali per garantire che le immagini dell'avatar vengano visualizzate correttamente senza distorsioni. #### Impostazioni di stile della variante * **Personalizzabile in base alla variante selezionata:** * Il componente Chip Container offre uno stile basato sulla variante, il che significa che è possibile applicare stili diversi in base alla variante di chip selezionata. * Questa funzionalità offre maggiore flessibilità e creatività nel design, garantendo che ogni variante di chip possa avere un aspetto unico ma coerente all'interno del contenitore.
--- # 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-it/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.