AX - Button-Menü

Überblick

AX - Schaltflächenmenü ist eine Experience-Cloud-Komponente, die ein Dropdown-Menü anzeigt, wenn Benutzer auf Experience-Seiten auf eine Schaltfläche klicken.

Verwenden Sie es, um verwandte Aktionen oder Navigationsoptionen unter einer einzigen Schaltfläche zusammenzufassen – wie Benutzerkontoaktionen, Schnellzugriffe, Exportoptionen oder Datensatzaktionen. Konfigurieren Sie Menüelemente manuell oder ziehen Sie sie dynamisch aus Salesforce-Daten im Experience Builder.

Perfekt für kompakte Navigation, Überlaufmenüs, Benutzerprofilaktionen, Massenoperationen oder überall dort, wo Sie mehrere Optionen benötigen, ohne die Seite mit einzelnen Schaltflächen zu überladen.

Einstellungen für das Schaltflächenmenü

Die Schaltflächenmenü-Komponente ermöglicht es Ihnen, ein Dropdown-Menü zu erstellen, das durch einen Schaltflächenklick ausgelöst wird. So können Sie es an die Bedürfnisse Ihrer Seite anpassen:

Beschriftung

  • Was es bewirkt: Legt den Text fest, der auf der Schaltfläche angezeigt wird.

  • Beispiel: "Navigation", "Aktionen", "Mehr erfahren."

Symbol

  • Was es bewirkt: Fügt der Schaltfläche ein visuelles Symbol hinzu.

  • Anwendung: Wählen Sie aus den verfügbaren Symbolen im Lightning Design System.

  • Optional: Sie können dies leer lassen, wenn Sie kein Symbol wünschen.

Schaltflächenstil

  • Was es bewirkt: Ändert das Aussehen der Schaltfläche, damit es dem Look & Feel Ihrer Seite entspricht.

  • Optionen:

    • Neutral

    • Brand

    • Destruktiv (für Aktionen wie Löschen)

    • Erfolg (für positive Aktionen)

    • Mehr...

Durch Anpassung der Darstellungseinstellungen können Sie das Aussehen Ihrer Schaltfläche noch weiter personalisieren. Zum Beispiel können Sie die Variante „Container“ wählen, um die Hintergrundfarbe der Schaltfläche nach Wunsch zu ändern oder das für Ihre Seite vordefinierte Farbtoken auszuwählen.

  • Was es bewirkt: Bestimmt, wo das Dropdown-Menü relativ zur Schaltfläche angezeigt wird.

  • Optionen:

    • Links

    • Rechts

    • Zentriert

    • Unten-links

    • Mehr...

  • Was es bewirkt: Steuert, wie sich das Menü öffnet.

  • Optionen:

    • Klick

    • Hover (öffnet bei Maus-Hover)

    • Fokus (öffnet bei Tastaturfokus)

Menüauslöser auf Hover gesetzt

Tooltip

  • Was es bewirkt: Zeigt hilfreiche Informationen an, wenn Benutzer mit der Maus über die Schaltfläche fahren.

  • Optional: Leer lassen, wenn keine zusätzliche Erklärung erforderlich ist.

Abwärtspfeil ausblenden

  • Was es bewirkt: Entfernt den normalerweise auf Menüs-Schaltflächen angezeigten nach unten zeigenden Pfeil.

  • Optional: Aktivieren Sie dieses Feld, wenn Sie ein saubereres Erscheinungsbild bevorzugen.

Auf volle Breite strecken

  • Was es bewirkt: Lässt die Schaltfläche auf die gesamte verfügbare Breite expandieren.

  • Optional: Aktivieren Sie dieses Feld, wenn Sie eine größere Schaltfläche wünschen.

Schaltfläche deaktivieren

  • Was es bewirkt: Macht die Schaltfläche und das Menü vorübergehend unbenutzbar.

  • Optional: Aktivieren Sie dieses Feld, um zu verhindern, dass Benutzer damit interagieren.,

  • Das Menü-Nubbin ist ein kleines, dezentes Dreieck neben Menüeinträgen innerhalb eines Schaltflächenmenüs.

  • Es verbindet das Menüpunkte visuell mit der Schaltfläche, die das Menü öffnet, und lenkt den Blick des Benutzers.

  • Dies hilft Benutzern, schnell zu erkennen, welcher Menüeintrag mit welcher Schaltfläche verknüpft ist, und verbessert somit die gesamte Benutzererfahrung.

  • Was es bewirkt: Definiert die Links oder Aktionen im Dropdown-Menü.

  • Anwendung: Fügen Sie Elemente mit Beschriftungen (dem angezeigten Text) und bei Bedarf einem Symbol hinzu.

Elementnavigation festlegen

Um Ihr Schaltflächenmenü interaktiv zu machen, müssen Sie jedem Menüeintrag mitteilen, wohin er führen soll, wenn jemand darauf klickt. Dies erfolgt im Bereich „Link zu“. Sie können hier mehr über die verschiedenen Aktionstypen lesen, die Sie vom Schaltflächenmenü aus auslösen können.


Darstellungseinstellungen

Mit diesen Einstellungen können Sie Ihr Schaltflächenmenü optisch an das Design und Branding Ihrer Seite anpassen.

Abstände

  • Was es bewirkt: Steuern Sie den Raum um die Schaltfläche herum.

  • Anwendung: Verwenden Sie Schieberegler oder Zahlenfelder, um die Abstände oben, unten, links und rechts anzupassen.

Beschriftung & Symbol

  • Farbe: Wählen Sie die Standardfarbe für den aktiven Zustand der Schaltfläche (geklickt oder beim Hover) und eine Hover-Farbe.

  • Schriftfamilie: Wählen Sie die Schriftart für den Beschriftungstext (z. B. Arial, Times New Roman, Verdana).

  • Schriftgröße: Passen Sie die Größe des Beschriftungstexts mit einem Schieberegler oder Zahlenfeld an.

  • Schriftstil: Wählen Sie normal, kursiv oder schräg für den Text.

  • Schriftstärke: Machen Sie den Text leicht, normal, mittel, fett oder extra fett.

  • Horizontale Ausrichtung: Entscheiden Sie, ob das Symbol links oder rechts vom Beschriftungstext stehen soll.

Hintergrund

  • Farbe: Wählen Sie die Standardfarbe für den Hintergrund der Schaltfläche, wenn sie aktiv ist, und die Hover-Farbe, wenn sie inaktiv ist.

Rahmen

Wählen Sie die Standardfarbe für den Rahmen der Schaltfläche im aktiven Zustand und die Hover-Farbe.

  • Größe: Passen Sie die Dicke des Rahmens mit einem Schieberegler oder Zahlenfeld an.

  • Stil: Wählen Sie zwischen einem durchgezogenen, gestrichelten, gepunkteten oder doppelten Rahmen.

  • Radius: Sie können die Rundheit der Ecken mit einem Schieberegler oder Zahlenfeld anpassen (ein höherer Wert macht die Ecken runder).

Bild (für Menüeinträge)

  • Farbiger Rahmen: Wählen Sie die Rahmenfarbe um Bilder von Menüeinträgen (falls vorhanden).

  • Größe: Passen Sie die Größe der Bilder von Menüeinträgen mit einem Schieberegler oder Zahlenfeld an.

  • Stil: Wählen Sie normalen, kursiven oder schrägen Stil für Bildunterschriften (falls vorhanden).

  • Radius: Passen Sie die Rundheit der Ecken von Bildern in Menüeinträgen mit einem Schieberegler oder Zahlenfeld an.

  • Objektanpassung: Entscheiden Sie, wie das Bild innerhalb seines Containers angepasst werden soll (z. B. fill, contain, cover).

Wichtige Überlegungen

  • Stil: Passen Sie das Aussehen und Verhalten des Schaltflächenmenüs an das Branding Ihrer Seite an.

  • Link zu: Erwägen Sie, die Interaktion „Link zu“ hinzuzufügen, um Benutzerinteraktionen mit den Menüeinträgen zu steuern.

Zuletzt aktualisiert

War das hilfreich?