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以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
|
現在のページのTextコンポーネントIDです。Pagerの |
1.1.0 |
|
|
文字列 |
1 |
現在表示されているページの番号です。 |
1.1.0 |
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
1 |
ページの合計数です。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
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プロパティを更新し、現在表示されているページに変更します。