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
プロパティを更新し、現在表示されているページに変更します。