Beispiel

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

• Sie möchten mehrere Ansichten mit ähnlichem Inhalt im Widget "Abschnitt" erstellen, um aufwändiges Scrollen in der App zu vermeiden. Integrieren Sie das Widget "Ansichtsnavigation", damit die Benutzer durch Klicken auf Registerkarten oder Schaltflächen oder Ziehen eines Schiebereglers den Abschnittsinhalt aktualisieren und auf die Ansichten zugreifen können.

Verwendungshinweise

Die Seite muss das Widget "Abschnitt" enthalten, mit dem Sie das Widget "Ansichtsnavigation" verknüpfen können. Platzieren Sie das Widget außerhalb des Abschnitts; das Widget "Ansichtsnavigation" kann nicht im entsprechenden Widget "Abschnitt" geschachtelt werden. Positionieren Sie das Widget beispielsweise ober- oder unterhalb eines Abschnitts (bei horizontal angeordneten Registerkarten) bzw. links oder rechts eines Abschnitts (bei vertikal angeordneten Registerkarten).

Wenn Sie das Widget "Ansichtsnavigation" hinzufügen, wird neben dem Widget das Fenster Schnellformat angezeigt, in dem Sie Styles auswählen können, z. B. Registerkarten, Symbole, Schieberegler und Navigationsschaltflächen. (Um später wieder auf diese Fenster zuzugreifen, klicken Sie auf die Schaltfläche Schnellformat auf der Werkzeugleiste des Widgets.) Sie können auch ein eigenes Design konfigurieren, indem Sie Farben und Schriftarten für die verschiedenen Zustände des Widgets in den erweiterten Einstellungen auswählen.

Bei den Registerkarten- und Symbol-Styles können Sie alle Ansichten des Abschnitts oder nur bestimmte Ansichten einbeziehen. Öffnen Sie zur Festlegung der Ansichtsreihenfolge das Konfigurationsfenster des Widgets "Abschnitt", und ziehen Sie die Ansichten in die Reihenfolge, in der sie im Widget "Ansichtsnavigation" dargestellt werden sollen. In den Einstellungen des Widgets "Abschnitt" können Sie auch die Ansichtsnamen bearbeiten.

Einstellungen

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

• Link zu: Wählen Sie ein Widget vom Typ "Abschnitt" auf der Seite aus.

Je nach Style können Sie unterschiedliche Einstellungen konfigurieren.

Bei den Registerkarten-Styles (Standard, Unterstreichen und Pills) können Sie folgende Einstellungen konfigurieren:

• Ansichten: Definieren Sie die Ansichten, die im Widget angezeigt werden sollen, mit einer der folgenden Optionen:
  • Auto: Alle Registerkarten für alle Ansichten im Abschnitt einbeziehen.
  • Benutzerdefiniert: Registerkarten für bestimmte Ansichten im Abschnitt einbeziehen.
• Richtung: Stellt die Registerkarten horizontal oder vertikal dar.
• Abstand: Definieren Sie den Abstand zwischen Registerkarten in Pixel.
• Ausrichtung: Legen Sie die Platzierung von Registerkartentext fest. Wenn Sie z. B. einen horizontalen Pill-Style auswählen, werden die Registerkartennamen an der Registerkarte ausgerichtet: Die linke oder rechte Kante oder zentriert dazwischen.
• Erweitert: Setzen Sie Ihr App-Design außer Kraft, um die Hintergrundfarbe des Widgets zu ändern. Gestalten Sie zudem die drei Zustände der Registerkarten, damit die Benutzer einen visuellen Hinweis erhalten, wenn Sie auf eine Registerkarte zeigen oder sie auswählen. Normal ist der Registerkartenzustand ohne Benutzerinteraktion, Ausgewählt gilt bei der Benutzerauswahl der Registerkarte, wobei die entsprechende Ansicht im verknüpften Abschnitts-Widget angezeigt wird, und Daraufzeigen ist der Registerkartenzustand, wenn ein Benutzer auf sie zeigt.

  Tipp:

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

  • Text: Ändern Sie die Schriftgröße (in Pixel) und die Schriftfarbe, und formatieren Sie die Registerkarte fett, kursiv, durchgestrichen und/oder unterstrichen.
  • Hintergrund: Wählen Sie eine Füllfarbe für die Registerkarte aus.
  • Rahmen oder Unterstrichen: Wählen Sie für die Registerkarte eine Rahmenfarbe, eine Rahmenart (z. B. gestrichelt oder gepunktet) und eine Rahmenbreite in Pixel aus. Für den Style Registerkarte – Unterstrichen können Sie nur eine Linienfarbe und -breite auswählen.
  • Rahmenradius: Ändern Sie den Radius (in Pixel oder Prozent), um die Registerkartenecken zu gestalten.

Beim Style Symbol können Sie folgende Einstellungen konfigurieren:

• Ansichten: Definieren Sie die Ansichten, die im Widget angezeigt werden sollen, mit einer der folgenden Optionen:
  • Auto: Symbole für alle Ansichten im Abschnitt einbeziehen.
  • Benutzerdefiniert: Symbole für bestimmte Ansichten im Abschnitt einbeziehen.
• Richtung: Stellt die Symbole horizontal oder vertikal dar.
• Abstand: Definieren Sie den Abstand zwischen Symbolen in Pixel.
• Ausrichtung: Legen Sie die Platzierung der Symbole im Widget fest. Wenn Sie z. B. eine vertikale Richtung auswählen, werden die Symbole am Widget-Container ausgerichtet: Die linke oder rechte Kante oder zentriert.
• QuickInfo: Aktiviert Hovertext, der den Namen der Ansicht anzeigt.
• Symbol: Bietet Symbole für die aktuelle Ansicht und andere Ansichten.
• Erweitert: Setzt das Design der App außer Kraft und ändert die Hintergrundfarbe und die Symbolgröße des Widgets (in Pixel) und die Farbe der drei Zustände des Symbols "Navigation anzeigen": Normal, Ausgewählt und Daraufzeigen.

Beim Style Schieberegler können Sie folgende Einstellungen konfigurieren:

• Ziehpunkt-Handle: Am Schieberegler soll ein Griff (Ziehpunkt) angezeigt werden, um den Fortschritt entlang des Schiebereglerpfades anzuzeigen.
• Erweitert: Das Design Ihrer App wird außer Kraft gesetzt, um die Hintergrundfarbe des Widgets zu ändern und die Farbe der drei Zustände des Schiebereglers festzulegen:
  • Aktiv: Abgeschlossener Teil des Schiebereglerpfades.
  • Ziehpunkt-Handle: Griff (oder Ziehpunkt) am Schiebereglerpfad. Für den Ziehpunkt können Sie Füll- und Rahmenfarben auswählen.
  • Nicht aktiv: Nicht abgeschlossener Teil des Schiebereglerpfades.

Bei den Pfeil-Styles können Sie folgende Einstellungen konfigurieren:

• Richtung: Zeigt die Navigationsschaltflächen und den Text horizontal oder vertikal an.
• Schritt: Definiert, wie viel sich der Abschnitt bei jedem Klick auf die Navigationsschaltflächen nach vorne und hinten bewegt. Der Standardwert ist 1, und die zulässigen Eingabewerte können zwischen 0 und 1 liegen. Um den Effekt zu sehen, legen Sie eine Übergangsanimation für das betreffende Abschnitts-Widget fest.
• Vorherige und Nächste: Geben Sie Text ein, und wählen Sie ein Symbol für die Navigationsschaltflächen.
• Erweitert: Setzen Sie das Design Ihrer App außer Kraft, um die Hintergrundfarbe des Widgets zu ändern und den Style der drei Zustände der Navigationsschaltflächen festzulegen: Normal ist der Zustand der Schaltfläche ohne Benutzerinteraktion, Daraufzeigen ist der Zustand der Schaltfläche, der durch den Benutzer initiiert wird, wenn er auf die Schaltfläche zeigt, und Deaktiviert bedeutet, dass auf die Schaltfläche nicht geklickt werden kann, da es keine vorherige oder nächste Ansicht gibt.
  • Text: Wählen Sie eine Schriftgröße (in Pixel), eine Farbe und einen Style für den Text der Navigationsschaltflächen.
  • Symbol: Ändern Sie die Größe (in Pixel) und Farbe der Navigationsschaltflächen.
  • Hintergrund: Wählen Sie eine Füllfarbe für die Navigationsschaltflächen aus.
  • Rahmen: Wählen Sie eine Farbe, einen Style und eine Breite (in Pixel) für die Schaltflächenrahmen aus.
  • Rahmenradius: Ändern Sie den Radius (in Pixel oder Prozent), um die Ecken der Navigationsschaltflächen abzurunden.