Motion Pager (Widget)

The Alexa motion pager responsive component AlexaMotionPager displays content in a series of pages with a widget-specific animation for changing pages. You use Alexa Presentation Language (APL) components and responsive components or templates to define the pages to show.

Compatibility

AlexaMotionPager is designed to work with the following widget viewport profiles in the alexa-viewport-profiles package:

  • Widget Medium (@hubWidgetMedium)

If you use AlexaMotionPager on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaMotionPager, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaMotionPager was introduced in version 1.5.0.

AlexaMotionPager parameters

The following table shows the AlexaMotionPager properties that work with the widget viewport profiles. Not all parameters apply to all viewport profiles. 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

data

Array

—

Data to bind into the AlexaMotionPager. When provided, AlexaMotionPager uses the data array inflation method. This means that the components in items are inflated one time for each value in data.

Medium

1.5.0

initialPage

Integer

0

The zero-based index of the starting page to display.

Medium

1.5.0

items

Any

—

An array of components or a single component to display.

Medium

1.5.0

navigation

String

wrap

Specifies the allowed navigation direction. Possible values are normal, none, wrap, forward-only. These options work the same as a standard Pager component. For details about pager navigation options, see the navigation property for the Pager component.

Medium

1.5.0

onPageChanged

Array

—

Commands to run when the page changes. These commands run after the pager has fully switched to the new page.

Medium

1.5.0

pagerId

String

—

An identifier to use for the underlying Pager component within the AlexaMotionPager layout. Set this property to an ID if you want to target the AlexaMotionPager with commands, such as AutoPage and SetPage.

Medium

1.5.0

paginationDotsBackgroundStyle

One of: solid, scrim, or none

none

Specifies the style of the paginations dots displayed. Applies when showPaginationDots is true. Set to none to use a transparent background. Set to solid to use a semi-transparent, high-contrast background. Set to scrim to use a theme-dependent gradient scrim.

Medium

1.5.0

showPaginationDots

Boolean

false

When true, display the Pagination Dots component at the bottom of the motion pager and the pager has more than one page. Page count is determined by the length of the data array, so the showPaginationDots property has no effect when data isn't used.

Medium

1.5.0

type

String

—

Always set to AlexaMotionPager.

Medium

1.5.0

Define the pages to display

Provide the pages to display in AlexaMotionPager in the items property.

AlexaMotionPager is a multi-child component. Therefore, how the items array works to define pages depends on whether you also set the data property:

  • When data contains an array of values, AlexaMotionPager uses the data array inflation method. This means that the components in items are inflated one time for each value in data.

  • When data isn't set, AlexaMotionPager uses the simple array of child components inflation method. This means that each item in the items array is inflated as a separate page.

The AlexaMotionPager component doesn't display any content on its own. You must provide the components or layouts to display in the items property.

Widget-specific animation when changing pages

AlexaMotionPager uses a custom "swipe away" page change animation:

  • When the pager advances to the next page, the current page slides out of view and reveals the next page underneath.
  • When the pager moves back to the previous page, the new page slides into view and covers the current page.

The following example shows this widget-specific animation. The AlexaMotionPager uses the AlexaTextWrapping responsive template to display text over a background. The AlexaFooterActionButton on the template runs a command to page through all the pages in the pager. After the AutoPage command finishes, the SetPage command resets the widget to the first page.

For a widget pager with an alternative "zoom" page transition, see Motion Scale.

AlexaMotionPager examples

The following example shows an AlexaMotionPager that uses the simple array of child components inflation method to display three pages. The pager displays each component in items as a separate page.

Was this page helpful?

Last updated: Dec 12, 2023