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.
• Advanced—Override your app’s theme to change the widget’s background color and 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.

  Tip:

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

  • Text—Change the font size (in pixels) and color, and style the tab using bold, italic, strikethrough, and underline formatting.
  • 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. 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.

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 and 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 style 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.