Das Widget "Ansichtsnavigation" bietet interaktiven Zugriff auf die Ansichten in einem Abschnitts-Widget. Wenn Benutzer auf die Ansichten zugreifen, wird anstelle der gesamten Seite nur der Inhalt des betreffenden Abschnitts aktualisiert; das wirkt sich positiv auf die App-Performance aus.
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 vom Typ "Navigation anzeigen" 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.
- Symbol anzeigen: Anzeige des Symbols für die einzelnen Ansichten. Sie können die Ansichtssymbole in den Einstellungen des Widgets "Abschnitt" ändern.
- Text anzeigen: Zeigt eine Beschriftung für jede Ansicht an.
Hinweis:
Sie müssen Symbol anzeigen, Text anzeigen oder beides aktivieren.
- 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. Standard ist der Registerkartenzustand ohne Benutzerinteraktion, Ausgewählt gilt bei der Benutzerauswahl der Registerkarte, wobei die entsprechende Ansicht im verknüpften Widget vom Typ "Abschnitt" 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.
- Symbol: Wenn die Option Symbol anzeigen aktiviert ist, können Sie Größe (in Pixeln) und die Farbe es Ansichtssymbols ändern.
- 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": Standard, 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. Die zulässigen Eingabewerte liegen zwischen 0 und 1. Um den Stufeneffekt zu sehen, müssen Sie eine Übergangsanimation für das entsprechende Widget vom Typ "Abschnitt" festlegen.
- 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 (für die Styles Pfeil 1 und Pfeil 3) zu ändern und die Schriftfarbe der Seitennummerierung der drei Zustände der Navigationsschaltflächen festzulegen: Standard ist der Zustand der Schaltfläche ohne Benutzerinteraktion, Mit der Maus zeigen ist der Zustand der Schaltfläche, der durch den Benutzer initiiert wird, wenn er mit der Maus 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.
Optionen für Interaktionen
Dieses Widget unterstützt Meldungsaktionen, die Sie auf der Registerkarte Aktion in den Widget-Einstellungen konfigurieren können. Meldungsaktionen erstellen automatische Interaktionen zwischen Widgets.
Das Widget "Ansichtsnavigation" unterstützt die Trigger Ansichtsänderung und Klick auf die Schaltfläche. Sie können zum Beispiel das Widget "Seitenleiste" öffnen, wenn ein Benutzer die Ansichten mit dem Widget "Ansichtsnavigation" ändert. Fügen Sie dazu Ihrer App beide Widgets hinzu. Klicken Sie in den Einstellungen des Widgets "Ansichtsnavigation" auf Trigger hinzufügen, wählen Sie Ansichtsänderung, dann das Widget "Seitenleiste" als Ziel und schließlich die Aktion Seitenleiste öffnen aus.