> 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-button-group.md). # AX - Schaltflächengruppe ## Übersicht **AX - Schaltflächengruppe** ist eine Experience-Cloud-Komponente, die mehrere zusammengehörige Schaltflächen gemeinsam als einheitliche Gruppe auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um zusammengehörige Aktionen nebeneinander darzustellen – wie „Speichern“ und „Abbrechen“, „Bearbeiten“ und „Löschen“ oder Navigationsoptionen für verschiedene Bereiche. Die Schaltflächen bleiben optisch als eine Einheit verbunden, sodass klar ist, dass es sich um zusammengehörige Optionen handelt. Ideal für Formularaktionen, Optionen zur Datensatzverwaltung, navigationsähnliche Registerkarten oder überall dort, wo Portalbenutzer zwischen mehreren zusammenhängenden Aktionen wählen müssen. *** ## Die Schaltflächengruppe konfigurieren Befolgen Sie diese Schritte, um die Avonni-Schaltflächengruppe perfekt an das Design und die Funktionalität Ihrer Experience-Cloud-Site anzupassen: ### **Wichtige Einstellungen** #### **Als Zeile anzeigen** Aktivieren Sie diese Einstellung, um die Schaltflächen horizontal über den Bildschirm anzuordnen. Wenn Sie sie deaktivieren, werden die Schaltflächen vertikal gestapelt. #### **Sichtbare Schaltflächen** Diese Einstellung bestimmt die maximale Anzahl an Schaltflächen, die direkt auf dem Bildschirm sichtbar sind. Wenn Sie mehr Schaltflächen als die angegebene Anzahl haben, werden die übrigen in ein praktisches Dropdown-Menü verschoben. #### **Schaltflächenmenü** * **Beschriftung:** Legen Sie den Text fest, der auf der Schaltfläche angezeigt wird, die das Dropdown-Menü mit zusätzlichen Schaltflächen öffnet. * **Symbolname:** Wählen Sie im Schaltflächenmenü ein passendes Symbol aus (verfügbare Symbole finden Sie im Salesforce Lightning Design System). * **Variante:** Wählen Sie den visuellen Stil für das Schaltflächenmenü (z. B. „neutral“, „brand“, „inverse“). * **Menüausrichtung:** Wählen Sie, wie das Dropdown-Menü in Bezug auf die Schaltfläche positioniert wird („links“ oder „rechts“). #### **Schaltflächen** * **Beschriftung:** Geben Sie den Text ein, der auf der Schaltfläche erscheinen soll. * **Symbolname:** Wählen Sie bei Bedarf ein Symbol, das auf der Schaltfläche platziert werden soll. * **Symbolposition:** Geben Sie an, ob sich das Symbol links oder rechts von der Schaltflächenbeschriftung befinden soll. * **Variante:** Sie können das Erscheinungsbild der Schaltfläche aus den vordefinierten Stilen auswählen („neutral“, „brand“, „destructive“ usw.). * **Deaktiviert:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche zunächst deaktiviert sein soll, sodass keine Benutzerinteraktion möglich ist. * **Ausgeblendet:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche zunächst ausgeblendet sein soll. * **Interaktion beim Klicken:** In diesem wichtigen Abschnitt können Sie festlegen, was passiert, wenn ein Benutzer auf die Schaltfläche klickt. Eine vollständige Liste möglicher Aktionen und Konfigurationen finden Sie auf der Dokumentationsseite „On Click Interactions“. ### **Wichtige Hinweise** * Gestalten Sie Ihre Schaltflächengruppe mit einer klaren visuellen Hierarchie. Verwenden Sie die Variante „brand“, um primäre Aktionen hervorzuheben. * Verwenden Sie die Variante „destructive“ sparsam für Aktionen mit weitreichenden Folgen. * Stellen Sie sicher, dass die Schaltflächenbeschriftungen knapp sind und ihre Funktion genau beschreiben. * Testen Sie Ihre Konfiguration der Schaltflächengruppe immer gründlich auf verschiedenen Geräten und in verschiedenen Browsern, um eine optimale Benutzererfahrung sicherzustellen. *** ## Darstellungsstil Die Avonni-Schaltflächengruppe bietet umfassende Styling-Optionen, um ihr Erscheinungsbild innerhalb Ihrer Experience-Cloud-Site anzupassen. Nachfolgend finden Sie eine Übersicht der verfügbaren Stilattribute:
Beschriftung/Symbol * **Farbe:** Legt die standardmäßige Text- oder Symbolfarbe fest. * **Aktive Farbe:** Legt die Text- oder Symbolfarbe fest, wenn die Schaltfläche aktiv ist (geklickt oder fokussiert). * **Hover-Farbe:** Legt die Text- oder Symbolfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt. * **Schriftfamilie:** Legt die Schrift fest, die für den Schaltflächentext verwendet wird. * **Schriftgröße:** Steuert die Größe des Schaltflächentextes. * **Schriftstil:** Legt den Schriftstil fest (z. B. normal, kursiv, schräg). * **Schriftstärke:** Bestimmt die Fettstärke des Schaltflächentextes (z. B. normal, fett, stärker).
Hintergrund * **Farbe:** Legt die standardmäßige Hintergrundfarbe der Schaltfläche fest. * **Aktive Farbe:** Legt die Hintergrundfarbe fest, wenn die Schaltfläche aktiv ist. * **Hover-Farbe:** Legt die Hintergrundfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt.
Rahmen * **Farbe:** Legt die standardmäßige Rahmenfarbe fest. * **Aktive Farbe:** Legt die Rahmenfarbe fest, wenn die Schaltfläche aktiv ist. * **Hover-Farbe:** Legt die Rahmenfarbe fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt. * **Größe:** Steuert die Breite des Rahmens. * **Stil:** Legt den Rahmenstil fest (z. B. durchgezogen, gestrichelt, gepunktet).
*** ### **Beispielverwendung** Um eine Schaltflächengruppe mit rotem Hintergrund, weißem Text und einem dezenten Hover-Effekt zu erstellen, sollten Sie die folgende Konfiguration in Betracht ziehen: ``` Beschriftung/Symbol: Farbe: weiß Hover-Farbe: #f5f5f5 Hintergrund: Farbe: rot Rahmen: Farbe: rot ``` ### **Wichtige Hinweise** * Verwenden Sie einen Web-Farbwähler oder -Generator, um die gewünschten Farbwerte zu finden. * Bemühen Sie sich um Konsistenz mit dem Gesamtdesign und Farbschema Ihrer Experience-Cloud-Site. * Testen Sie Ihre Stiländerungen immer, um die gewünschte visuelle Wirkung und Barrierefreiheit sicherzustellen. --- # 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-button-group.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.