> 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-de/experience-components/ax-chip-container.md). # AX - Chip-Container ## Übersicht **AX - Chip-Container** ist eine Experience-Cloud-Komponente, die auf Experience-Sites-Seiten eine Sammlung interaktiver Tags oder Beschriftungen (Chips) anzeigt. Verwenden Sie sie, um verwandte Elemente, Kategorien, Fähigkeiten, Filter oder beliebig gruppierte Daten in einem kompakten, visuellen Format anzuzeigen. Benutzer können mit Chips interagieren, um sie auszuwählen, zu entfernen oder Aktionen auszulösen. Konfigurieren Sie das Styling und Verhalten der Chips im Experience Builder ohne Code. Perfekt für Filterauswahlen, Tag-Anzeigen, Skill-Badges, Kategorienlisten oder überall dort, wo Portalnutzer mehrere zusammengehörige Elemente platzsparend sehen und mit ihnen interagieren müssen. ## Konfiguration ### Allgemeine Einstellungen #### 1. Einzeilig * **Funktionalität:** Legt fest, ob die Chips in einer einzigen Zeile angezeigt oder auf mehrere Zeilen umgebrochen werden können. * **Verwendung:** Nützlich, um ein kompaktes Layout beizubehalten oder eine größere Anzahl von Chips unterzubringen. #### 2. Ist einklappbar * **Funktionalität:** Ermöglicht, dass der Chip-Container einklappbar ist. * **Verwendung:** Ideal für Szenarien, in denen Sie Platz sparen oder die Sichtbarkeit der Chips steuern möchten. #### 3. Ist erweitert * **Funktionalität:** Legt den Ausgangszustand des Chip-Containers auf erweitert fest. * **Verwendung:** Nützlich, wenn alle Chips für den Benutzer beim Laden sofort sichtbar sein sollen. ### Datenquelle Der Avonni Chip-Container bietet zwei primäre Methoden für die Datenintegration – manuell und Abfrage von Datenquellen. Jede Methode dient unterschiedlichen Zwecken und eignet sich für verschiedene Szenarien, von statischen Datenanzeigen bis hin zur dynamischen Echtzeit-Datenintegration aus Salesforce-Datensätzen.
#### manuelle Datenquelle * **Funktionalität:** * Diese Einstellung ermöglicht die direkte und manuelle Dateneingabe in den Chip-Container. * **Verwendung:** * Dies ist besonders nützlich, wenn die Chip-Daten nicht dynamisch aus Salesforce-Datensätzen stammen. * Sie ist ideal für erste Setups, Testumgebungen oder Szenarien, in denen statische Daten bevorzugt werden. #### Datenquelle abfragen * **Funktionalität:** * Die Abfrageoption ermöglicht es dem Chip-Container, Daten automatisch aus Salesforce-Datensätzen abzurufen und anzuzeigen. * **Verwendung:** * Perfekt für Fälle, in denen Chips dynamisch mit aktuellen Informationen aus Salesforce gefüllt werden müssen. * Ermöglicht die Wiedergabe von Daten in Echtzeit und ist damit eine ausgezeichnete Wahl für aktive, datengetriebene Sites. ### Datenzuordnung Der Prozess der Datenzuordnung ist entscheidend für die Genauigkeit und Relevanz der im Chip-Container angezeigten Daten. * **Prozess:** * Dabei werden Salesforce-Felddaten sorgfältig den entsprechenden Attributen im Chip-Container zugeordnet. Dieser Schritt stellt sicher, dass die Daten sinnvoll und geordnet abgerufen und dargestellt werden. * **Ergebnis:** * Eine korrekte Datenzuordnung garantiert, dass die aus Salesforce abgerufenen Daten in den Chips richtig dargestellt werden, wodurch sinnvolle und kontextuell präzise Anzeigen sichergestellt werden. ## Styling Die Anpassung des Stils der Avonni Chip-Container-Komponente ist entscheidend, um ihr Erscheinungsbild an die allgemeine Ästhetik Ihrer Salesforce-Experience-Cloud-Site anzupassen. Die Komponente bietet eine Reihe von Styling-Optionen, die eine detaillierte Anpassung ermöglichen und sowohl Funktionalität als auch visuelle Attraktivität sicherstellen. {% tabs %} {% tab title="Abstand" %} **Chip-Container Blockanfang/-ende, Inlineanfang/-ende:** * Diese Einstellungen steuern den Abstand um den Chip-Container in Block- (vertikaler) und Inline- (horizontaler) Ausrichtung. * Durch das Anpassen dieser Werte lässt sich der gewünschte visuelle Abstand zwischen den Chips und anderen Elementen schaffen, was die Lesbarkeit und die Konsistenz des Layouts verbessert. {% endtab %} {% tab title="Chip-Container" %} * **Hintergrund, Rahmenfarbe, Größe, Stil und Radius:** * Passen Sie die Hintergrundfarbe an, damit sie das Design der Site ergänzt oder kontrastiert. * Die Optionen zur Rahmenanpassung (Farbe, Größe, Stil und Radius) bieten Kontrolle über die Umrandung des Containers und ermöglichen es, dass er hervorsticht oder sich nahtlos in andere Seitenelemente einfügt. {% endtab %} {% tab title="Einzelner Chip" %} * **Schriftgröße, -stärke und -stil des Labels; Rahmenstärke, -stil und -radius; Zeilenhöhe:** * Feinabstimmung der Typografie der Chip-Labels für Klarheit und Markenkonformität. * Anpassungen von Rahmen und Zeilenhöhe verbessern die visuelle Wirkung jedes Chips und machen sie deutlicher und einfacher zu bedienen. {% endtab %} {% tab title="Avatar" %} * **Rahmengröße, -farbe und -stil; Schriftfarbe/-stärke der Initialen, Hintergrundfarbe des Symbols, Bildobjekt-Anpassung:** * Avatare innerhalb von Chips können an das Design der Site angepasst werden, mit Optionen zur Anpassung von Rahmeneigenschaften und der Schriftmerkmale der Initialen. * Einstellungen wie „Image Object Fit“ mit „fill“, „contain“, „cover“ usw. sind entscheidend, damit Avatarbilder korrekt und ohne Verzerrung angezeigt werden. {% endtab %} {% tab title="Variantenstile" %} * **Anpassbar basierend auf der ausgewählten Variante:** * Die Chip-Container-Komponente bietet variantenspezifisches Styling, was bedeutet, dass je nach ausgewählter Chip-Variante unterschiedliche Stile angewendet werden können. * Diese Funktion ermöglicht mehr Flexibilität und Kreativität im Design und stellt sicher, dass jede Chip-Variante innerhalb des Containers ein einzigartiges, aber stimmiges Erscheinungsbild haben kann. {% 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-de/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.