Page Indicators

Page indicators show the number of pages in a series and indicate which page is currently being displayed.

Usage

Page indicators are dots at the top of the screen. Choose one of two page indicator types, depending on whether or not the pages can be navigated with a rotary action.

Behavior

  • Focus

    Page indicators appear as dots. Each dot represents one page in a series. When users rotate the bezel or swipe the screen, the focus shifts to the next or previous dot.

  • Linking multiple pages to the middle dot

    Page indicators can use up to 20 dots, representing 20 pages. If you have more than 20 pages in a series, multiple pages are represented by the 11th dot in the middle, which stays in focus until all linked pages are scrolled through.

Types

  • Circular page indicators

    When pages can be navigated by rotary action and swiping, circular page indicators curve around the top edge of the screen. They form a center-aligned arc of up to 120 degrees.

    Circular page indicators in developer's guides

    Native

    Index > circle

    Web

    -

    Circular page indicators are provided when both the rotary action and swiping are available for page navigation.

  • Linear page indicators

    Linear page indicators form a horizontal line at the top edge of the screen. Use them when navigation is through swiping only. Choose the linear page indicator when the rotary action controls other functions and can’t be used for page navigation.

    Linear page indicators in developer's guides

    Native

    Index > thumbnail

    Web

    Page Indicator

    (+Section Changer)

    Linear page indicators are provided when swiping is the only available interaction for page navigation.