Motion Pager（ウィジェット）

Alexa Motion Pagerレスポンシブ対応コンポーネント（AlexaMotionPager）は、コンテンツを一連のページとして表示し、ページの変更時にウィジェット固有のアニメーションを適用します。表示するページは、Alexa Presentation Language（APL）コンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して定義します。

互換性

AlexaMotionPagerは、alexa-viewport-profilesパッケージの次のウィジェットビューポートプロファイルで動作するように設計されています。

ウィジェット、中（@hubWidgetMedium）

サポートされていないビューポートでAlexaMotionPagerを使用すると、予期しない結果になることがあります。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaMotionPagerを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaMotionPagerはバージョン1.5.0で導入されました。

AlexaMotionPagerのパラメーター

次の表は、ウィジェットビューポートプロファイルで機能するAlexaMotionPagerのプロパティの一覧です。すべてのパラメーターがすべてのビューポートプロファイルに適用されるわけではありません。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

type以外のパラメーターはすべてオプションです。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
`data`	配列	—	`AlexaMotionPager`にバインドするデータです。設定した場合、`AlexaMotionPager`はデータ配列のインフレート方法を使用します。つまり、`items`内のコンポーネントは、`data`内の値ごとに1回ずつインフレートされます。	中	1.5.0
`initialPage`	整数	0	表示する最初のページの0から始まるインデックスです。	中	1.5.0
`items`	任意	—	表示するコンポーネントの配列または単一のコンポーネントです。	中	1.5.0
`navigation`	文字列	`wrap`	移動可能な方向を指定します。指定できる値は、`normal`、`none`、`wrap`、`forward-only`です。これらのオプションは、標準の`Pager`コンポーネントと同じように機能します。ページャーナビゲーションオプションの詳細については、`Pager`コンポーネントの`navigation`プロパティを参照してください。	中	1.5.0
`onPageChanged`	配列	—	ページが変更されたときに実行するコマンドです。これらのコマンドは、ページャーが新しいページに完全に切り替わった後に実行されます。	中	1.5.0
`pagerId`	文字列	—	`AlexaMotionPager`レイアウト内の基盤の`Pager`コンポーネントに使用する識別子です。`AutoPage`や`SetPage`などのコマンドで`AlexaMotionPager`をターゲットにする場合は、このプロパティにIDを設定します。	中	1.5.0
`paginationDotsBackgroundStyle`	次のいずれか：`solid`、`scrim`、`none`	`none`	表示されるページネーションドットのスタイルを指定します。`showPaginationDots`が`true`の場合に適用されます。透明な背景を使用するには、`none`に設定します。半透明の高コントラストな背景を使用するには、`solid`に設定します。テーマに応じたグラデーションスクリムを使用するには、`scrim`に設定します。	中	1.5.0
`showPaginationDots`	ブール値	`false`	`true`の場合、ページャーに2ページ以上が含まれていれば、Motion Pagerの下部にPagination Dotsコンポーネントを表示します。ページ数は`data`配列の長さによって決まるため、`data`が使用されない場合、`showPaginationDots`プロパティの効果はありません。	中	1.5.0
`type`	文字列	—	常に`AlexaMotionPager`に設定します。	中	1.5.0

表示するページを定義する

AlexaMotionPagerに表示するページは、itemsプロパティで指定します。

AlexaMotionPagerは複数子コンポーネントです。このため、ページを定義するときにitems配列がどのように使用されるかは、dataプロパティが設定されているかどうかによって異なります。

dataに値の配列が含まれている場合、AlexaMotionPagerはデータ配列のインフレート方法を使用します。つまり、items内のコンポーネントは、data内の値ごとに1回ずつインフレートされます。
dataが設定されていない場合、AlexaMotionPagerは子コンポーネントの単純な配列のインフレート方法を使用します。つまり、items配列の各項目が個々のページとしてインフレートされます。

注： dataプロパティにデフォルト値はありません。MotionPagerでdataプロパティを使用しない場合は、dataに空の配列（[]）を割り当ててください。

AlexaMotionPagerコンポーネントは、単独では何もコンテンツを表示しません。表示するコンポーネントまたはレイアウトをitemsプロパティに指定する必要があります。

ページ変更時のウィジェット固有のアニメーション

AlexaMotionPagerでは、カスタムの「スワイプしてめくる」ページ切り替えアニメーションが使用されます。

ページャーが次のページに進むときは、現在のページがスライドして表示領域の外に出るように動き、下にある次のページが現れます。
ページャーが前のページに戻るときは、新しいページがスライドして表示領域に入るように動き、現在のページを覆います。

以下の例は、このウィジェット固有のアニメーションを示しています。AlexaMotionPagerは、AlexaTextWrappingレスポンシブ対応テンプレートを使用して、背景の上にテキストを重ねて表示します。テンプレートのAlexaFooterActionButtonは、ページャー内のすべてのページを順番に表示するコマンドを実行します。AutoPageコマンドが終了すると、SetPageコマンドにより、ウィジェットが最初のページにリセットされます。

もう1つのページ遷移効果である「ズーム」を使用するウィジェットページャーについては、Motion Scaleを参照してください。

AlexaMotionPagerの例

以下は、子コンポーネントの単純な配列のインフレート方法を使用して3つのページを表示するAlexaMotionPagerの例です。ページャーは、items内の各コンポーネントを個々のページとして表示します。

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 12 月 23 日