> 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 - Button Group ## Überblick **AX - Schaltflächengruppe** ist eine Experience-Cloud-Komponente, die mehrere zusammengehörige Schaltflächen gemeinsam als eine einheitliche Gruppe auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um zusammengehörige Aktionen nebeneinander darzustellen – etwa "Speichern" und "Abbrechen", "Bearbeiten" und "Löschen" oder Navigationsoptionen für verschiedene Bereiche. Die Schaltflächen bleiben visuell als eine Einheit verbunden, sodass klar ist, dass sie zusammengehörige Auswahlmöglichkeiten sind. Ideal für Formularaktionen, Optionen zur Datensatzverwaltung, Navigation im Tab-Stil oder überall dort, wo Portalbenutzer zwischen mehreren zusammengehörigen Aktionen wählen müssen. ## Konfiguration Befolgen Sie diese Schritte, um die Avonni-Schaltflächengruppe genau an das Design und die Funktionalität Ihrer Experience-Cloud-Website anzupassen: ### **Wichtige Einstellungen** #### **Als Zeile anzeigen** Steuert, wie die Schaltflächen nebeneinander angeordnet werden. Wenn aktiviert, werden sie als getrennte Elemente mit Abstand dazwischen dargestellt. Wenn deaktiviert, werden sie zu einer einzigen kompakten Gruppe zusammengefügt, direkt aneinander anschließend. Beide Layouts sind horizontal. Die Schaltflächengruppe stapelt ihre Schaltflächen nicht vertikal. Um Schaltflächen in einer vertikalen Spalte anzuordnen, platzieren Sie stattdessen eine separate **AX - Schaltfläche** Komponente für jede Aktion im Bereich.

Als Zeile anzeigen: Ein, oben, mit getrennten Schaltflächen. Aus, darunter, mit denselben drei Schaltflächen zu einer bündigen Gruppe verbunden.

#### **Dehnen** Wenn aktiviert, füllt die Gruppe die Breite ihres Containers aus, und die Schaltflächen teilen sich den verfügbaren Raum. Lassen Sie es deaktiviert, um die Gruppe bei ihrer Inhaltsbreite zu belassen, was **Horizontale Ausrichtung** Positionen. Schaltflächen, die nur ein Symbol anzeigen, behalten ihre eigene Breite, sodass die beschrifteten Schaltflächen den zusätzlichen Platz erhalten, anstatt eine Lücke um ein zentriertes Symbol zu lassen. #### **Horizontale Ausrichtung** Positioniert die Schaltflächengruppe innerhalb ihres Containers: links, zentriert oder rechts, im Bedienfeld als drei Ausrichtungs-Symbole dargestellt. Standardmäßig ist links eingestellt und wirkt nur auf die Gruppe, solange **Dehnen** deaktiviert ist. #### **Sichtbare Schaltflächen** Diese Einstellung bestimmt die maximale Anzahl der Schaltflächen, die direkt auf dem Bildschirm sichtbar sind. Wenn Sie mehr Schaltflächen haben als die angegebene Anzahl, werden die übrigen in einem praktischen Dropdown-Menü platziert. #### **Attribute des Schaltflächenmenüs** * **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 geeignetes Symbol aus (verfügbare Symbole finden Sie im Salesforce Lightning Design System). * **Variante:** Wählen Sie den visuellen Stil für das Schaltflächenmenü — **Ohne Rahmen**, **Rahmenlos invers**, **Rahmen**, **Gefüllter Rahmen**, **Umgekehrter Rahmen**, **Marke**, **Markenumriss**, **Container**, **Zerstörend**, **Zerstörender Text**, **Umgekehrt**, **Neutral** (der Standard) oder **Erfolg**. * **Menuausrichtung:** Wählen Sie aus, wie das Dropdown-Menü relativ zur Schaltfläche positioniert wird — **Auto**, **Links**, **Zentriert**, **Rechts**, **Unten links**, **Unten zentriert** oder **Unten rechts**. Die Standardeinstellung, **Auto**platziert das Menü dort, wo es im sichtbaren Bereich passt. #### **Schaltflächen** * **Beschriftung:** Geben Sie den Text ein, der auf der Schaltfläche erscheinen soll. * **Symbolname:** Falls gewünscht, wählen Sie ein Symbol, das auf der Schaltfläche angezeigt werden soll. * **Symbolquelle:** Verwenden Sie Ihr eigenes Bild als Symbol der Schaltfläche anstelle eines Symbols aus dem Lightning Design System. * **Symbolposition:** Geben Sie an, ob sich das Symbol links oder **Links** (der Standard) oder rechts **Rechts** der Beschriftung der Schaltfläche befindet. Es wird erst angezeigt, sobald die Schaltfläche eine **Beschriftung**: Eine Schaltfläche nur mit Symbol hat keine Beschriftung, an der das Symbol ausgerichtet werden kann. * **Variante:** Wählen Sie das Erscheinungsbild der Schaltfläche — **Ohne Rahmen**, **Rahmenlos invers**, **Basis**, **Rahmen**, **Gefüllter Rahmen**, **Umgekehrter Rahmen**, **Marke**, **Markenumriss**, **Container**, **Zerstörend**, **Zerstörender Text**, **Umgekehrt**, **Neutral** (der Standard) oder **Erfolg**. * **Deaktiviert:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche zunächst deaktiviert sein soll, damit keine Benutzerinteraktion möglich ist. * **Ausgeblendet:** Aktivieren Sie diese Einstellung, wenn die Schaltfläche anfangs ausgeblendet sein soll. * **Titel:** Tooltip-Text, der angezeigt wird, wenn ein Benutzer mit der Maus über die Schaltfläche fährt. * **Alternativtext:** Barrierefreier Text, der die Schaltfläche beschreibt und von Bildschirmleseprogrammen vorgelesen wird. Setzen Sie ihn immer, wenn die Schaltfläche ein Symbol ohne Beschriftung anzeigt. * **Bei Klick:** In diesem wichtigen Abschnitt legen Sie fest, was passiert, wenn ein Benutzer auf die Schaltfläche klickt. Auf der Dokumentationsseite "On Click Interactions" finden Sie eine umfassende Liste möglicher Aktionen und Konfigurationen. ### **Wichtige Hinweise** * Gestalten Sie Ihre Schaltflächengruppe mit einer klaren visuellen Hierarchie. Verwenden Sie die **Marke** Variante, um primäre Aktionen hervorzuheben. * Verwenden Sie die **Zerstörend** Variante sparsam für Aktionen mit weitreichenden Konsequenzen. * Stellen Sie sicher, dass Schaltflächenbeschriftungen prägnant sind und ihre Funktion genau beschreiben. * Testen Sie Ihre Schaltflächengruppen-Konfiguration immer gründlich auf verschiedenen Geräten und Browsern, um ein optimales Benutzererlebnis sicherzustellen. ## Stil Die Avonni-Schaltflächengruppen-Komponente bietet umfassende Styling-Optionen, mit denen Sie ihr Erscheinungsbild innerhalb Ihrer Experience-Cloud-Website anpassen können. Nachfolgend finden Sie eine Übersicht über die verfügbaren Styling-Attribute: {% tabs %} {% tab title="Rand" %} Steuert den Außenabstand um die Gruppe. {% endtab %} {% tab title="Innenabstand" %} Steuert den Innenabstand der Gruppe. {% endtab %} {% tab title="Beschriftung/Symbol" %} * **Farbe:** Legt die Standardfarbe des Textes oder Symbols 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 Schriftart für den Text der Schaltfläche fest. * **Schriftgröße:** Steuert die Größe des Schaltflächentextes. * **Schriftstil:** Legt den Schriftstil fest (z. B. normal, kursiv, schräg). * **Schriftstärke:** Bestimmt die Fette des Schaltflächentextes (z. B. normal, fett, stärker). {% endtab %} {% tab title="Hintergrund" %} * **Farbe:** Legt die Standard-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. {% endtab %} {% tab title="Rahmen" %} * **Farbe:** Legt die Standard-Randfarbe fest. * **aktive Farbe:** Legt die Randfarbe fest, wenn die Schaltfläche aktiv ist. * **Hover-Farbe:** Legt die Randfarbe 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). {% endtab %} {% endtabs %} ### **Beispielverwendung** Um eine Schaltflächengruppe mit rotem Hintergrund, weißem Text und einem dezenten Hover-Effekt zu erstellen, verwenden Sie die folgende Konfiguration: ``` Beschriftung/Symbol: Farbe: Weiß Hover-Farbe: #f5f5f5 Hintergrund: Farbe: Rot Rahmen: Farbe: Rot ``` ### **Wichtige Hinweise** * Verwenden Sie einen Web-Farbauswähler oder -Generator, um die gewünschten Farbcodes zu finden. * Achten Sie auf Konsistenz mit dem gesamten Design und Farbschema Ihrer Experience-Cloud-Website. * Testen Sie Ihre Styling-Änderungen immer, um den gewünschten visuellen Effekt und die 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-button-group.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.