Views Navigation widget

The Views Navigation widget provides interactive access to the views in a Section widget. As users access the views in the section, only the content in the section refreshes instead of the entire page, providing better app performance.

Example

Use this widget to support app design requirements such as the following:

• You create multiple views of similar content in a Section widget to avoid too much scrolling in your app. Include a Views Navigation widget so users can click tabs or buttons or drag a slider to refresh the section content and access the views.

Usage notes

The page must have a Section widget to which you can link the Views Navigation widget. You must position the widget outside the section; you cannot nest the Views Navigation widget in its corresponding Section widget. For example, position the widget above or below a section (ideal for horizontal tabs) or at the left or right of a section (ideal for vertical tabs).

When you add a Views Navigation widget, the Quick style window appears next to the widget where you can select from a variety of styles including tabs, symbols, a slider, and navigation buttons. (To access this window again later, click the Quick style button on the widget’s toolbar.) You can also configure your own design by choosing colors and fonts for the widget’s various states in the advanced settings.

For the tab and symbol styles, you can include all the section's views or specific views. To specify the sequence of the views, open the Section widget's configuration panel and drag the views in the order you want them to appear in the Views Navigation widget. You can also edit the view names in the Section widget’s settings.

Settings

The Views Navigation widget includes the following settings:

• Link to—Choose a section widget from the page.

Depending on the style you choose, you can configure different settings.

For the tab styles (default, underline, and pills), you can configure the following settings:

• Views—Define the views to show in the widget by selecting one of the following options:
  • Auto—Include tabs for all the views in the section.
  • Custom—Include tabs for specific views in the section.
• Direction—Display the tabs horizontally or vertically.
• Spacing—Define the spacing between tabs in pixels.
• Alignment—Determine placement of the tab text. For example, if you choose a horizontal pill style, the tab names align with the tab: the left or right edge or centered between.
• Show icon—Display icons for each view. You can change each view's icon in the Section widget's settings.
• Show text—Display a label for each view.

  Note:

  You must turn on Show icon or Show text, or both.

• Advanced—Override your app’s theme to change the widget’s background color, border radius, and style.
  • Background—Add a background color to the widget.
  • Border radius—Enter a border radius for the background in pixels (px) or percent (%).
  • States—Style the tabs' three states to provide users a visual cue when they hover over or select a tab. Default is the tab state without user interaction; Selected is the user selection of the tab, which displays the corresponding view in the linked Section widget; and Hover is the tab state when a user points to it.
    • Text—Change the font size (in pixels) and color, and style the tab using bold, italic, strikethrough, and underline formatting.
    • Icon—When Show icon is turned on, you can change the size (in pixels) and color of the view icons.
    • Background—Choose a fill color for the tab.
    • Border or Underline—Choose the tab’s border color, style (such as dashed or dotted), and width in pixels. You can style all sides of the border at the same time or style each of them separately. For the Tab underline style, you can only choose a line color and width.
    • Border radius—Change the radius size (by pixels or percent) to shape the tab corners.

    Tip:

    To experiment with these options, click Live view on the builder toolbar.

For the Symbol style, you can configure the following settings:

• Views—Define the views to show in the widget by selecting one of the following options:
  • Auto—Include symbols for all the views in the section.
  • Custom—Include symbols for specific views in the section.
• Direction—Display the symbols horizontally or vertically.
• Spacing—Define the spacing between symbols in pixels.
• Alignment—Determine placement of the symbols in the widget. For example, if you choose a vertical direction, the symbols align with the widget container: the left or right edge or centered.
• Tooltip—Enable hover text that displays the view's name.
• Symbol—Select icons for the current view and other views.
• Advanced—Override your app’s theme and change the widget’s background color, border radius, and icons.
  • Background—Add a background color to the widget.
  • Border radius—Enter a border radius for the background in pixels (px) or percent (%).
  • States—You can change the icon size (in pixels) and color for the three states of the view navigation symbol: Default, Selected, and Hover.

For the Slider style, you can configure the following settings:

• Thumb handle—Include a handle (or knob) on the slider to show the progress along the track.
• Advanced—Override your app’s theme to change the widget’s background color and the color of the slider’s three states:
  • Active—Completed portion of the slider track.
  • Thumb—Thumb handle (or knob) on the slider track. You can choose fill and border colors for the thumb.
  • Inactive—Incomplete portion of the slider track.

For the arrow styles, you can configure the following settings:

• Direction—Display the navigation buttons and text horizontally or vertically.
• Step—Define how much the section moves forward and backward for each click of the navigation buttons. The default value is 1. Acceptable input values range from 0 to 1. To see the step effect, you must set a transition animation for the corresponding Section widget.
• Previous and Next—Enter text and choose an icon for the navigation buttons.
• Advanced—Override your app’s theme to change the widget’s background color and pagination font color (for the Arrow 1 and Arrow 3 styles) and the navigation button’s three states: Default is the button state without user interaction, Hover is the button state when a user points to it, and Disabled is the button state that isn’t clickable when there is no next or previous view.
  • Text—Choose a font size (in pixels), color, and style for the navigation button’s text.
  • Icon—Change the size (in pixels) and color of the navigation buttons.
  • Background—Choose a fill color for the navigation buttons.
  • Border—Choose a color, style, and width (in pixels) for button borders.
  • Border radius—Change the radius size (by pixels or percent) to round the corners of the navigation buttons.

Interaction options

This widget supports message actions, which you can configure on the Action tab of the widget's settings. Message actions create automatic interactions between widgets.

The Views Navigation widget supports the Views change and Button click triggers. For example, you can make a Sidebar widget open whenever the user changes views with a Views Navigation widget. To do this, add both widgets to your app. In the Views Navigation widget settings, click Add a trigger, select Views change, select the Sidebar widget as the target, and select the Open sidebar action.