Widget "Menü"

Das Widget "Menü" organisiert Seiten und hilft Benutzern, sich zwischen den Seiten Ihrer App zu bewegen. Sie können die Richtung des Menüs ändern, einen Style auswählen, wie zum Beispiel Registerkarten oder Pills, und eine Farbe für den Hintergrund und das aktive Menü auswählen.

Beispiel

Verwenden Sie dieses Widget, um zum Beispiel die folgenden Anforderungen an das App-Design zu unterstützen:

  • Sie möchten eine App mit mehreren Seiten erstellen und Benutzern die Möglichkeit geben, auf einfache und intuitive Weise von Seite zu Seite zu wechseln.

Verwendungshinweise

In der Regel positionieren Sie ein Menü oben auf einer Seite in der Kopfzeile oder im Text. Das Widget "Menü" wird automatisch mit den App-Seiten, Links und Ordnern gefüllt, die im Fenster Seite angezeigt werden. Die Namen von Seiten, Links und Ordnern werden im Menü in der Reihenfolge angezeigt, in der Sie sie angeordnet haben, es sei denn, Sie klicken im Fenster Seite auf Im Menü ausblenden. Wenn Sie Seiten und Links in einer Seite oder einem Ordner schachteln, werden sie im Widget "Menü" als Dropdown-Menü angezeigt. Ein Ordner stellt ein Dropdown-Menü bereit, das es ermöglicht, auf die oberste Ebene zu klicken, ohne die Seite zu wechseln. Benutzer interagieren mit dem Menü, indem sie auf den Link zeigen oder klicken, was die Navigation zurück zu den Seiten in Ihrer Experience ermöglicht.

Wenn der Inhalt des Menüs dessen Höhe oder Breite überschreitet, werden am Anfang und am Ende des Menüs Navigationspfeile angezeigt. Mit diesen Pfeilen können Sie alle Menüoptionen anzeigen.

Einstellungen

Das Widget "Menü" verfügt über folgende Einstellungen:

  • Typ: Definieren Sie die Position und das Aussehen des Menüs: Horizontal, vertikal oder Symbol. Beim Typ "Symbol" wird das Menü vertikal auf ein modales Fenster auf der linken oder rechten Seite der App reduziert.
    • Erweiterungsmodus für das Untermenü: Das Untermenü kann dem Endbenutzer als erweitertes Menü oder als Menü im Foldable-Design angezeigt werden. Diese Einstellung ist nur für Menüs der Typen "Vertikal" und "Symbol" verfügbar und nur dann in Ihrer App sichtbar, wenn sie geschachtelte Seiten oder Links enthält.
  • Aussehen: Definieren Sie das Aussehen der Menüelemente mit den folgenden Optionen:
    • Style: Wählen Sie einen Menü-Style aus: "Standard", "Unterstreichen" oder "Pills". Die Farben für jeden Style werden aus dem Design Ihrer App übernommen.
    • Abstand: Definieren Sie den Abstand in Pixel zwischen den Seiten, die im Menü aufgelistet sind.
    • Ausrichtung: Bestimmen Sie die Platzierung des Textes auf jedem Menüelement. Wenn Sie zum Beispiel ein horizontales Menü erstellen und den Style Unterstreichen wählen, werden die Seitennamen an der Linie ausgerichtet: Die linke oder rechte Kante oder zentriert dazwischen.
    • Symbol anzeigen: Lassen Sie für jedes Menüelement ein Symbol anzeigen, das angibt, ob es sich um eine Seite, einen Link oder einen Ordner handelt. Sie können das Standardsymbol für diese Elemente im Fenster Seite ändern.
  • Erweitert: Überschreibt das Design Ihrer App und ändert das Aussehen des Widgets.
    • Farbe des Navigationspfeils: Ändert die Farbe der Navigationspfeilschaltflächen, die angezeigt werden, wenn der Inhalt des Menüs dessen Höhe oder Breite überschreitet. Sie können die Farbe der Schaltflächen für die folgenden drei Zustände ändern:
      • Standard: Der Standardzustand der Schaltflächen ohne Benutzerinteraktion.
      • Mit der Maus zeigen: Der Zustand, der durch den Benutzer initiiert wird, wenn er auf eine der Schaltflächen zeigt.
      • Deaktiviert: Der Zustand, in dem es keine nächste oder vorherige Option gibt und die Schaltflächen nicht auf Benutzerinteraktionen reagieren.
    • Hintergrund: Fügen Sie dem Menü eine Hintergrundfarbe hinzu.
    • Rahmenradius: Geben Sie einen Rahmenradius für den Hintergrund in Pixel (px) oder Prozent (%) ein.
    • Zustände: Geben Sie eine visuelle Darstellung für die Angabe des Status des Menüs mit unterschiedlichen Text- und Rahmeneinstellungen an. Sie können für den Zustand Ausgewählt z. B. den Text fett formatieren, die Schriftgröße erhöhen und eine andere Hintergrundfarbe und Rahmenart festlegen.
      • Standard: Der Standardzustand des Menüs ohne Benutzerinteraktion.
      • Daraufzeigen: Der Zustand, der durch den Benutzer initiiert wird, wenn er auf einen Link im Menü zeigt.
      • Ausgewählt: Eine Benutzerauswahl im Menü.
      Tipp:

      Wenn Sie mit diesen Optionen experimentieren möchten, dann klicken Sie auf Live-Ansicht auf der Builder-Werkzeugleiste.