Page Counter

Page Counter

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

alexa-layoutsパッケージを読み込む

AlexaPageCounterを使用するには、alexa-layoutsパッケージを読み込みます。

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

AlexaPageCounterパラメーター

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

名前 型 デフォルト 説明 追加されたバージョン

currentPageComponentId

文字列

pageCounterCurrentPage

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

1.1.0

currentPage

文字列

1

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

1.1.0

theme

文字列

dark

指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマは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.value + 1}に設定します。onPageChangedから生成されたイベントが、event.source.valueの現在のページのインデックスを提供します。インデックス値は0から始まるため、1ずつ増えて正確なページ番号を表示します。

例として、次のAlexaPageCounterを参照してください。

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

Pagerでは、SetValueコマンドは次のようになります。

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

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