Pagination Dots

The Alexa pagination dots responsive component AlexaPaginationDots displays a graphical representation of the current page and the total number of pages in a pager. The component can animate as the user changes the pages. Use AlexaPaginationDots in widgets with multiple pages to provide this information in a small space.

Compatibility

AlexaPaginationDots is designed to work with the following viewport profiles:

  • The following widget viewport profiles in the alexa-viewport-profiles package:
    • Widget Medium (@hubWidgetMedium)
  • All standard viewport profiles in the alexa-viewport-profiles package:
    • All hub round profiles
    • All hub landscape profiles
    • All hub portrait profiles
    • All mobile profiles
    • All TV profiles

For details about viewport profiles, see Viewport Profiles.

If you use AlexaPaginationDots on an unsupported viewport, you might have unexpected results.

Import the alexa-layouts package

To use AlexaPaginationDots, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaPaginationDots was introduced in version 1.6.0.

AlexaPaginationDots parameters

The following table shows the parameters you can set on AlexaPaginationDots. Unless otherwise noted, standard viewport profiles support all parameters. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.

All parameters except type are optional.

Name Type Default Description Widget support Version added

backgroundStyle

String

none

Specifies the background style for the component.
Accepted values:
none – Fully transparent background.
solid – Semi-transparent high-contrast background
scrim – A theme-dependent gradient scrim.

Medium

1.6.0

entities

Any

—

Array of entity data to bind to this layout.

Medium

1.6.0

layoutDirection

String

${environment.layoutDirection}

Specifies the layout direction for the component. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed.

For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

Medium

1.6.0

pageCount

Number

1

The total number of pages in the pager. AlexaPaginationDots uses this value to build the graphic indicating the total number of pages.

Medium

1.6.0

pageIndex

Number

0

The index for the page currently-displayed page.

Medium

1.6.0

paginationDotsComponentId

String

"paginationDotsComponentId"

An identifier to assign to the AlexaPaginationDots component.

Medium

1.6.0

paginationDotsPosition

String

center

Specifies the placement of the component.
Accepted values: center or left.

Medium

1.6.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

Medium

1.6.0

type

String

—

Always set to AlexaPaginationDots.

Medium

1.6.0

Commands

The AlexaPaginationDots component provides two commands that animate page changes. Run these commands from the onPageChanged handler of your Pager.

  • NextPage – Animates the pagination dots in a forward direction.
  • PreviousPage – Animates the pagination dots in a backward direction.

The following table shows the parameters for the NextPage and PreviousPage commands.

Property Type Default Description

componentId

String

"paginationDotsComponentId"

The identifier for the AlexaPaginationDots component. Set to the same value you used for the paginationDotsComponentId property.

pageIndex

Number

0

The index of the page that has moved into view.

autoScroll

Boolean

false

Indicates whether the page change was due to a timed, automatic scroll, or user interaction. Only applies for NextPage command.

AlexaPaginationDots example

The following example shows AlexaPaginationDots displayed below a Pager component. When you change pages, the onPageChanged event handler runs the NextPage or PreviousPage commands to animate the pagination dots.

The following example shows a similar Pager with AlexaPaginationDots, displayed in a widget.

Was this page helpful?

Last updated: Dec 06, 2023