YouTube ChannelSchedule a CallSubscribe for Updates

AX - Schaltflächengruppe

Übersicht

AX - Schaltflächengruppe ist eine Experience Cloud-Komponente, die mehrere verwandte Schaltflächen zusammen als eine einheitliche Gruppe auf Experience Sites-Seiten anzeigt.

Verwenden Sie sie, um verwandte Aktionen nebeneinander darzustellen – wie „Speichern“ und „Abbrechen“, „Bearbeiten“ und „Löschen“ oder Navigationsoptionen für verschiedene Bereiche. Die Schaltflächen bleiben visuell als eine Einheit verbunden, wodurch deutlich wird, dass es sich um verwandte Optionen handelt.

Perfekt für Formularaktionen, Optionen zur Datensatzverwaltung, tab-ähnliche Navigation oder überall dort, wo Portalbenutzer zwischen mehreren verwandten Aktionen wählen müssen.

Konfigurieren der Schaltflächengruppe

Befolgen Sie diese Schritte, um die Avonni-Schaltflächengruppe optimal an das Design und die Funktionalität Ihrer Experience Cloud-Site anzupassen:

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 von Schaltflächen fest, die direkt auf dem Bildschirm sichtbar sind. Wenn Sie mehr Schaltflächen haben als die angegebene Anzahl, werden die übrigen in ein praktisches Dropdown-Menü gelegt.

Schaltflächen-Menü

  • 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ächen-Menü ein passendes Symbol aus (siehe Salesforce Lightning Design System für verfügbare Symbole).

  • Variante: Wählen Sie den visuellen Stil für das Schaltflächen-Menü (z. B. ‚neutral‘, ‚brand‘, ‚inverse‘).

  • Menüausrichtung: Wählen Sie aus, wie das Dropdown-Menü relativ zur 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 aus, das auf der Schaltfläche platziert werden soll.

  • Symbolposition: Geben Sie an, ob das Symbol links oder rechts neben der Schaltflächenbeschriftung stehen soll.

  • Variante: Sie können das Erscheinungsbild der Schaltfläche aus den vordefinierten Stilen auswählen (z. B. ‚neutral‘, ‚brand‘, ‚destructive‘ usw.).

  • Deaktiviert: Aktivieren Sie diese Einstellung, wenn die Schaltfläche beim Start deaktiviert sein und Benutzerinteraktion verhindern soll.

  • Versteckt: Aktivieren Sie diese Einstellung, wenn die Schaltfläche anfangs 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 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 erheblichen Folgen.

  • Stellen Sie sicher, dass Schaltflächentexte knapp und ihre Funktion genau beschreiben.

  • Testen Sie Ihre Konfiguration der Schaltflächengruppe stets gründlich auf verschiedenen Geräten und in verschiedenen Browsern, um ein optimales Benutzererlebnis zu gewährleisten.

Aussehen/Styling

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

Beschriftung/Symbol

  • Farbe: Legt die Standardfarbe für Text oder Symbol fest.

  • Farbe aktiv: Legt die Text- oder Symbolfarbe fest, wenn die Schaltfläche aktiv ist (geklickt oder fokussiert).

  • Farbe Hover: Legt die Text- oder Symbolfarbe fest, wenn der Benutzer die Maus über die Schaltfläche bewegt.

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

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

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

  • Schriftgewicht: Bestimmt die Stärke des Schaltflächentexts (z. B. normal, fett, fetter).

Hintergrund

  • Farbe: Legt die Standardhintergrundfarbe der Schaltfläche fest.

  • Farbe aktiv: Legt die Hintergrundfarbe fest, wenn die Schaltfläche aktiv ist.

  • Farbe Hover: Legt die Hintergrundfarbe fest, wenn der Benutzer die Maus über die Schaltfläche bewegt.

Rahmen

  • Farbe: Legt die Standardfarbe des Rahmens fest.

  • Farbe aktiv: Legt die Rahmenfarbe fest, wenn die Schaltfläche aktiv ist.

  • Farbe Hover: Legt die Rahmenfarbe fest, wenn der Benutzer die Maus über die Schaltfläche bewegt.

  • Größe: Steuert die Breite des Rahmens.

  • Stil: Gibt den Rahmenstil an (z. B. solid, dashed, dotted).

Beispielanwendung

Um eine Schaltflächengruppe mit rotem Hintergrund, weißem Text und einem dezenten Hover-Effekt zu erstellen, ziehen Sie die folgende Konfiguration in Betracht:

Beschriftung/Symbol:
   Farbe: weiß
   Farbe Hover: #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 die gewünschte visuelle Wirkung und Zugänglichkeit sicherzustellen.

Zuletzt aktualisiert

War das hilfreich?