> 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 beliebige 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 Design und Verhalten der Chips im Experience Builder ohne Code. Perfekt für Filterauswahlen, Tag-Anzeigen, Skill-Badges, Kategorienlisten oder überall dort, wo Portalbenutzer mehrere zusammengehörige Elemente platzsparend sehen und mit ihnen interagieren müssen. ## Konfiguration des Chip-Containers ### Allgemeine Einstellungen #### 1. Einzelzeilig * **Funktionalität:** Bestimmt, ob die Chips in einer einzelnen Zeile angezeigt werden oder in 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 Anfangszustand des Chip-Containers auf erweitert fest. * **Verwendung:** Nützlich, wenn alle Chips beim Laden sofort für den Benutzer sichtbar sein sollen. ### Datenquellenkonfiguration für den Avonni Chip-Container Der Avonni Chip-Container bietet zwei primäre Methoden für die Datenintegration – manuelle und abfragebasierte 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 Erstkonfigurationen, Testumgebungen oder Szenarien, in denen statische Daten bevorzugt werden. #### Abfrage-Datenquelle * **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 befüllt werden müssen. * Ermöglicht die Echtzeit-Darstellung von Daten und ist damit eine ausgezeichnete Wahl für aktive, datengetriebene Sites. ### Datenzuordnungen für die Abfrage-Datenquelle 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 strukturiert abgerufen und dargestellt werden. * **Ergebnis:** * Eine korrekte Datenzuordnung garantiert, dass die aus Salesforce abgerufenen Daten in den Chips richtig dargestellt werden und eine aussagekräftige, kontextgenaue Anzeige gewährleistet ist. ## Styling-Einstellungen ### Übersicht Die Anpassung des Stils der Avonni-Chip-Container-Komponente ist entscheidend, um ihr Erscheinungsbild mit der allgemeinen Ästhetik Ihrer Salesforce-Experience-Cloud-Site in Einklang zu bringen. Die Komponente bietet eine Reihe von Styling-Optionen, die eine detaillierte Anpassung ermöglichen und so sowohl Funktionalität als auch visuelle Attraktivität sicherstellen. ### Abstandsoptionen **Chip-Container Blockanfang/-ende, Inline-Anfang/-ende:** * Diese Einstellungen steuern den Abstand um den Chip-Container in blockorientierter (vertikaler) und Inline- (horizontaler) Ausrichtung. * Durch 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. #### Styling des Chip-Containers * **Hintergrund, Rahmenfarbe, Größe, Stil und Radius:** * Passen Sie die Hintergrundfarbe an, um sie mit dem Design der Site zu ergänzen oder einen Kontrast dazu zu bilden. * Die Optionen zur Rahmenanpassung (Farbe, Größe, Stil und Radius) bieten Kontrolle über die Kontur des Containers, sodass er hervorgehoben oder nahtlos mit anderen Seitenelementen verschmelzen kann. #### Styling einzelner Chips * **Schriftgröße, Schriftstärke, Schriftstil des Labels; Rahmenstärke, Rahmenstil, Radius; Zeilenhöhe:** * Passen Sie die Typografie der Chip-Beschriftungen fein an, um Klarheit und Markenanpassung sicherzustellen. * Anpassungen von Rahmen und Zeilenhöhe erhöhen die visuelle Wirkung jedes Chips und machen sie deutlicher und leichter bedienbar. #### Avatar-Anpassung innerhalb von Chips * **Rahmengröße, Farbe, Stil; Schriftfarbe/-stärke der Initialen, Hintergrundfarbe des Symbols, Bildanpassung:** * Avatare innerhalb von Chips können so gestaltet werden, dass sie zum Design der Site passen, mit Optionen zum Anpassen der Rahmeneigenschaften und der Schriftmerkmale der Initialen. * Einstellungen wie „Bildanpassung“ mit Optionen wie „fill“, „contain“, „cover“ usw. sind entscheidend, damit Avatar-Bilder korrekt und ohne Verzerrung angezeigt werden. #### Variantendesign-Einstellungen * **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.
--- # 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.