Schaltflächenmenü

Überblick

Die Avonni Button Menu-Komponente bereichert die Navigation Ihrer Experience Cloud-Site mit einem flexiblen Dropdown-Menü, das durch einen Button ausgelöst wird. Sie kombiniert anpassbares Styling, intuitives Verhalten und dynamische Datenquellen, um benutzerfreundliche Menüs zu erstellen, die auf die Bedürfnisse Ihrer Site zugeschnitten sind.

Button-Menu-Einstellungen

Die Button-Menu-Komponente ermöglicht es Ihnen, ein Dropdown-Menü zu erstellen, das durch einen Button-Klick ausgelöst wird. So können Sie es an die Bedürfnisse Ihrer Site anpassen:

Beschriftung

• Was sie bewirkt: Legt den Text fest, der auf dem Button erscheint.

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

Symbol

• Was sie bewirkt: Fügt dem Button ein visuelles Symbol hinzu.

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

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

Button-Stil

• Was sie bewirkt: Ändert das Erscheinungsbild des Buttons, damit es zum Look & Feel Ihrer Site passt.

• Optionen:

  • Neutral

  • Marke

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

  • Erfolgsorientiert (für positive Aktionen)

  • Mehr...

Das Anpassen der Erscheinungseinstellungen ermöglicht es Ihnen, das Aussehen Ihres Buttons noch weiter zu personalisieren. Beispielsweise können Sie die Variante "Container" wählen, um die Hintergrundfarbe des Buttons nach Belieben zu ändern, oder das für Ihre Site vordefinierte Farb-Token auswählen.

Menüausrichtung

• Was sie bewirkt: Bestimmt, wo das Dropdown-Menü relativ zum Button erscheint.

• Optionen:

  • Links

  • Rechts

  • Zentriert

  • Unten-Links

  • Mehr...

Menüauslöser

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

• Optionen:

  • Klick

  • Hover (öffnet beim Überfahren mit der Maus)

  • Fokus (öffnet bei Tastaturfokus)

Tooltip

• Was sie bewirkt: Zeigt hilfreiche Informationen an, wenn Benutzer mit der Maus über den Button fahren.

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

Abwärtspfeil ausblenden

• Was sie bewirkt: Entfernt den nach unten zeigenden Pfeil, der normalerweise auf Menü-Buttons angezeigt wird.

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

Auf volle Breite strecken

• Was sie bewirkt: Lässt den Button sich ausdehnen, sodass er die gesamte verfügbare Breite einnimmt.

• Optional: Markieren Sie dieses Feld, wenn Sie einen größeren Button möchten.

Button deaktivieren

• Was sie bewirkt: Macht den Button und das Menü vorübergehend unbrauchbar.

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

Menü-Nubbin

• Das Menü-Nubbin ist ein kleines, dezentes Dreieck neben Menüelementen innerhalb eines Button-Menüs.

• Es verbindet das Menüelement visuell mit dem Button, der das Menü öffnet, und lenkt den Blick des Benutzers.

• Dies hilft Benutzern, schnell zu erkennen, welches Menüelement mit einem bestimmten Button verknüpft ist, und verbessert das gesamte Benutzererlebnis.

Menüelemente

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

• Anleitung zur Verwendung: Fügen Sie Elemente mit Bezeichnungen (dem angezeigten Text) und bei Bedarf einem Symbol hinzu.

Elementnavigation einstellen

Um Ihr Button-Menü interaktiv zu machen, müssen Sie jedem Menüelement mitteilen, wohin es führen soll, wenn jemand darauf klickt. Dies erfolgt im Abschnitt "Link To". Sie können hier mehr über die verschiedenen Arten von Aktionen lesen, die Sie vom Button-Menü aus auslösen können.

Erscheinungseinstellungen

Mit diesen Einstellungen können Sie Ihr Button-Menü optisch an das Design und Branding Ihrer Site anpassen.

Abstände

• Was sie bewirkt: Steuern Sie den Abstand um den Button herum.

• Anleitung zur Verwendung: Verwenden Sie Schieberegler oder Zahlenfelder, um die oberen, unteren, linken und korrekten Abstandswerte anzupassen.

Bezeichnung & Symbol

• Farbe: Wählen Sie die Standardfarbe für den Zustand, wenn der Button aktiv ist (geklickt oder darüber schwebend), 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 Beschriftungstextes mit einem Schieberegler oder Zahlenfeld an.

• Schriftstil: Wählen Sie normal, kursiv oder schräg als Textstil.

• Schriftstärke: Machen Sie den Text leicht, regular, medium, 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 des Buttons, wenn er aktiv ist, und die Hover-Farbe, wenn er inaktiv ist.

Rahmen

Wählen Sie die Standardfarbe, wenn der Button aktiv ist, und die Hover-Farbe für die Umrandung des Buttons.

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

• Stil: Wählen Sie zwischen einer durchgezogenen, gestrichelten, gepunkteten oder doppelten Umrandung.

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

Bild (für Menüelemente)

• Rahmenfarbe: Wählen Sie die Farbe der Umrandung um Bilder von Menüelementen (falls vorhanden).

• Größe: Passen Sie die Größe der Bilder der Menüelemente 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 Rundung der Ecken von Bildern der Menüelemente mit einem Schieberegler oder Zahlenfeld an.

• Objektanpassung: Bestimmen Sie, wie das Bild in seinem Container passen soll (z. B. fill, contain, cover).

Wichtige Überlegungen

• Stil: Passen Sie das Aussehen und Gefühl des Button-Menüs an, damit es zum Branding Ihrer Site passt.

• Link To: Erwägen Sie, die Interaktion "Link To" hinzuzufügen, um Benutzerinteraktionen mit den Menüelementen zu behandeln.