Page Counter

Page Counter

Alexa Page Counterレスポンシブ対応コンポーネント（AlexaPageCounter）は、現在のページ番号と総ページ数を表示します。たとえば、5ページ中1ページ目の場合は「1 | 5」のように表示します。このコンポーネントを使用して、Pagerでページに番号を割り当てることができます。

互換性

AlexaPageCounterは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

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

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

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

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

AlexaPageCounterのパラメーター

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

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

accessibilityLabel

文字列

ページカウンターを説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。

サポートされません

1.7.0

currentPage

文字列

1

現在表示されているページの番号です。

サポートされません

1.1.0

currentPageComponentId

文字列

pageCounterCurrentPage

現在のページのTextコンポーネントIDです。PagerのonPageChangedハンドラーで使用して、SetValueコマンドで現在のページを更新します。

サポートされません

1.1.0

entities

配列

—

このコンポーネントにバインドするentityデータの配列です。

サポートされません

1.2.0

theme

文字列

dark

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

サポートされません

1.1.0

totalPages

文字列

1

総ページ数です。

サポートされません

1.1.0

type

文字列

—

常にAlexaPageCounterに設定されます。

サポートされません

1.1.0

AlexaPageCounterの例

AlexaPageCounterは、現在表示されているページの番号を表示するコンポーネントです。通常は、ユーザーがページを移動すると自動的にページ番号が更新されるようにします。これを行うには、PagerのonPageChangedイベントでSetValueコマンドを使用して、AlexaPageCounterのtextプロパティを設定します。

  • AlexaPageCounterのcurrentPageComponentIdパラメーターを一意のIDに設定します。これは、現在のページ番号を表示するAlexaPageCounter内のコンポーネントIDになります。
  • onPageChangedハンドラーで、次のようにSetValueコマンドを呼び出します。
    • componentIdを同じIDに設定します。
    • propertyをtextに設定します。
    • valueを${event.source.page + 1}に設定します。onPageChangedから生成されたイベントが、event.source.pageの現在のページのインデックスを提供します。インデックス値は0から始まるため、1ずつ増えて正確なページ番号を表示します。

例として、以下のAlexaPageCounterを見てみましょう。

{
  "currentPageComponentId": "myIDForTheCurrentPage",
  "totalPages": "5",
  "type": "AlexaPageCounter"
}

次の例は、PagerのonPageChangedハンドラー内の対応するSetValueコマンドを示しています。

{
  "type": "Pager",
  "id": "myPager",
  "onPageChanged": [
    {
      "type": "SetValue",
      "componentId": "myIDForTheCurrentPage",
      "property": "text",
      "value": "${event.source.page + 1}"
    }
  ],
  "width": "100%",
  "height": "100%",
  "data": [],
  "item": []
}

ページが変わると、SetValueはIDがmyIDForTheCurrentPageのコンポーネントのtextプロパティを更新し、現在表示されているページに変更します。

この例では、onMountコンポーネントプロパティを使用してAutoPageコマンドを起動しています。Pagerは各ページを順に進みます。ドキュメントを更新するとリセットされ、最初のページが表示されます。マウスでクリックしてドラッグし、ページをスワイプすることもできます。

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

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