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

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.
AlexaMotionPager
AlexaMotionPager

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

AlexaMotionPager examples

The following example shows an AlexaMotionPager that 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 an example of how APL renders this widget, see the image shown in Widget-specific animation when changing pages.

Example of AlexaMotionPager with simple array of child components inflation

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.


Last updated: Mar 08, 2023