Schaltflächengruppe

Übersicht

Die Avonni Button Group-Komponente verbessert die Benutzerinteraktionen innerhalb von Salesforce Experience Cloud-Sites, indem sie Ihnen ermöglicht, mehrere Schaltflächen zu gruppieren. Diese Komponente vereinfacht die Navigation der Site und Aktionen und schafft so eine elegantere und intuitivere Benutzererfahrung.

Konfiguration der Button Group

Befolgen Sie diese Schritte, um die Avonni Button Group-Komponente so anzupassen, dass sie perfekt zum Design und zur Funktionalität Ihrer Experience Cloud-Site passt:

Wichtige Einstellungen

Als Reihe 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 legt die maximale Anzahl an Schaltflächen fest, die direkt auf dem Bildschirm sichtbar sind. Wenn Sie mehr Schaltflächen haben als die angegebene Anzahl, werden die verbleibenden in ein praktisches Dropdown-Menü verschoben.

Button-Menü

• Bezeichnung: 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 Button-Menü ein geeignetes Symbol aus (siehe Salesforce Lightning Design System für verfügbare Symbole).

• Variante: Wählen Sie den visuellen Stil für das Button-Menü (z. B. „neutral“, „brand“, „inverse“).

• Ausrichtung des Menüs: Wählen Sie, wie das Dropdown-Menü relativ zur Schaltfläche positioniert wird („links“ oder „rechts“).

Schaltflächen

• Bezeichnung: 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 das Symbol links oder rechts vom Schaltflächentext stehen soll („links“ oder „rechts“).

• 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 anfänglich deaktiviert sein soll, um Benutzerinteraktionen zu verhindern.

• Versteckt: Aktivieren Sie diese Einstellung, wenn die Schaltfläche ursprünglich ausgeblendet sein soll.

• Bei Klick-Interaktion: Dieser wichtige Abschnitt ermöglicht es Ihnen zu definieren, was passiert, wenn ein Benutzer auf die Schaltfläche klickt. Konsultieren Sie die Dokumentationsseite „On Click Interactions“ für eine umfassende Liste möglicher Aktionen und Konfigurationen.

Wichtige Überlegungen

• Gestalten Sie Ihre Button Group 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 erheblichen Konsequenzen.

• Stellen Sie sicher, dass die Beschriftungen der Schaltflächen kurz sind und ihre Funktion genau beschreiben.

• Testen Sie Ihre Button Group-Konfiguration stets gründlich auf verschiedenen Geräten und in verschiedenen Browsern, um eine optimale Benutzererfahrung zu gewährleisten.

Styling-Aussehen

Die Avonni Button Group-Komponente bietet umfassende Styling-Optionen, um ihr Erscheinungsbild innerhalb Ihrer Experience Cloud-Site anzupassen. Nachfolgend eine Aufschlüsselung der verfügbaren Styling-Attribute:

Bezeichnung/Symbol

• Farbe: Legt die Standardfarbe des Textes oder Symbols fest.

• aktive Farbe: Legt die Farbe des Textes oder Symbols fest, wenn die Schaltfläche aktiv ist (geklickt oder fokussiert).

• Hover-Farbe: Legt die Farbe des Textes oder Symbols fest, wenn der Benutzer mit der Maus über die Schaltfläche fährt.

• Schriftfamilie: Gibt die Schriftart an, die für den Schaltflächentext verwendet werden soll.

• Schriftgröße: Steuert die Größe des Schaltflächentextes.

• Schriftstil: Legt den Schriftstil fest (z. B. normal, kursiv, schräg).

• Schriftstärke: Bestimmt die Fettigkeit des Schaltflächentextes (z. B. normal, fett, fetter).

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.

Rahmen

• Farbe: Legt die Standardrahmenfarbe 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: Gibt den Rahmenstil an (z. B. solid, dashed, dotted).

Beispielhafte Verwendung

Um eine Button Group mit rotem Hintergrund, weißem Text und einem dezenten Hover-Effekt zu erstellen, verwenden Sie die folgende Konfiguration:

Bezeichnung/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.

• Streben Sie Konsistenz mit dem Gesamtdesign und dem Farbschema Ihrer Experience Cloud-Site an.

• Testen Sie Ihre Styling-Änderungen stets, um den gewünschten visuellen Effekt und die Barrierefreiheit sicherzustellen.