Pagination Dots

Pagination Dots

Alexa Pagination Dotsレスポンシブ対応コンポーネント（AlexaPaginationDots）は、現在のページとPager内の総ページ数をグラフィカルに表示します。コンポーネントはユーザーがページを変更するとアニメーションを実行できます。複数のページがあるウィジェットでAlexaPaginationDotsを使用すると、この情報を小さなスペースに表示できます。

互換性

AlexaPaginationDotsは、次のViewportプロファイルで動作するように設計されています。

  • alexa-viewport-profilesパッケージの以下のウィジェットViewportプロファイル：
    • ウィジェット、中（@hubWidgetMedium）
  • alexa-viewport-profilesパッケージのすべての標準Viewportプロファイル：
    • すべての円形デバイスプロファイル
    • すべての横長デバイスプロファイル
    • すべての縦長デバイスプロファイル
    • すべてのモバイルプロファイル
    • すべてのテレビプロファイル

Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

サポートされていないViewportでAlexaPaginationDotsを使用すると、予期しない結果になることがあります。

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

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

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

AlexaPaginationDotsのパラメーター

以下の表は、AlexaPaginationDotsで設定できるパラメーターを示しています。特に記載のない限り、標準Viewportプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットViewportプロファイルを示しています。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

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

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

backgroundStyle

文字列

none

コンポーネントの背景のスタイルを指定します。
有効な値：
none - 完全に透明な背景です。
solid - 半透明の高コントラストな背景です。
scrim - テーマに応じたグラデーションのレイヤーです。

中

1.6.0

entities

任意

—

このレイアウトにバインドするエンティティデータの配列です。

中

1.6.0

layoutDirection

文字列

${environment.layoutDirection}

コンポーネントのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。

中

1.6.0

pageCount

数値

1

Pager内の総ページ数です。AlexaPaginationDotsはこの値を使用して、総ページ数を示すグラフィックを作成します。

中

1.6.0

pageIndex

数値

0

現在表示されているページのインデックスです。

中

1.6.0

paginationDotsComponentId

文字列

"paginationDotsComponentId"

AlexaPaginationDotsコンポーネントに割り当てるIDです。

中

1.6.0

paginationDotsPosition

文字列

center

コンポーネントの配置を指定します。
有効な値は、centerまたはleftです。

中

1.6.0

theme

文字列

dark

ダークまたはライトのカラーテーマを設定します。選択されたテーマによってコンポーネントの色が制御されます。

中

1.6.0

type

文字列

—

常にAlexaPaginationDotsに設定されます。

中

1.6.0

コマンド

AlexaPaginationDotsコンポーネントには、ページの変更をアニメーション化する2つのコマンドがあります。これらのコマンドは、PagerのonPageChangedハンドラーから実行します。

  • NextPage - ページネーションドットを順方向にアニメーション化します。
  • PreviousPage - ページネーションドットを逆方向にアニメーション化します。

以下の表は、NextPageコマンドとPreviousPageコマンドのパラメーターを示しています。

プロパティ 型 デフォルト 説明

componentId

文字列

"paginationDotsComponentId"

AlexaPaginationDotsコンポーネントの識別子です。paginationDotsComponentIdプロパティに使用した値と同じ値に設定します。

pageIndex

数値

0

ビューに移動したページのインデックスです。

autoScroll

ブール値

false

ページ変更が時間指定の自動スクロールによるものか、ユーザー操作によるものかを示します。NextPageコマンドにのみ適用されます。

AlexaPaginationDotsの例

以下は、Pagerコンポーネントの下に表示されるAlexaPaginationDotsの例です。ページを変更すると、onPageChangedイベントハンドラーはNextPageまたはPreviousPageコマンドを実行して、ページネーションドットをアニメーション化します。

以下は、AlexaPaginationDotsを使用した同様のPagerの例です。これはウィジェットに表示されます。

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

最終更新日: 2025 年 11 月 11 日