APL Pager(1.1以降)
Pagerは、一連のコンポーネントを1つずつ表示します。通常、Pagerは、時系列に並べられたデータ項目を表示するために使用します。Pagerでは長い連続した形で項目が表示されないため、Sequenceとは異なります。
プロパティ
Pager
コンポーネントには、コンポーネントプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
data |
データ: プロパティ | none | ✕ | ✕ | このContainerにバインドするデータです。 |
firstItem |
コンポーネントとレイアウトの配列 | none | ✕ | ✕ | 他のどの項目よりも先に含めるコンポーネントです。 |
initialPage |
整数 | 0 | ✕ | ✕ | 最初のページの(0から始まる)インデックスです。デフォルトは0です。 |
item/items |
コンポーネントとレイアウトの配列 | [ ] | ✕ | ✕ | データセットを配置するのに使用するコンポーネントです。 |
lastItem |
コンポーネントとレイアウトの配列 | none | ✕ | ✕ | 他のすべての項目の後に含めるコンポーネントです。 |
navigation |
normal 、none 、wrap 、forward-only |
wrap |
✕ | ✕ | 移動可能な方向を指定します。 |
onPageChanged |
コマンド配列 | [] | ✕ | ✕ | ページを切り替える場合に実行するコマンドです。 |
Pagerは、左から右に順番に並べられた一連のページとしてユーザーに表示されます。通常、ユーザーは、Pagerを左右にスワイプしてページを切り替えます。デバイスにタッチパネルが搭載されていない場合、Pagerはキーボードの入力(左右の矢印キーまたはTabキー)に応じて移動します。
PagerとSequenceでは動作が異なります。Sequenceは、連続した項目のリストとして表示されます。画面のサイズが小さい場合、ゆっくりスワイプするとSequenceには1つの項目しか表示されませんが、コンテンツ内をすばやく移動する高速スワイプモードがサポートされているため、「高速スクロールモード」に設定するとコンテンツの複数の項目が小さく表示されます。個々の項目は、隣り合って並べられた状態で表示されます。一方、Pagerでは、前後のページのいずれかの方向に少しスワイプするだけで、それまで見ていたページから新しいページへとコンテンツが切り替わります。
指定されない場合、Pager
コンポーネントのheight
とwidth
のデフォルトは100dpです。Pagerのheight
とwidth
は、絶対ディメンションまたは相対ディメンションのいずれかである必要があります。auto
は使用できません。Pager
の子のheight
とwidth
は「100%」に固定されています。
Pager
コンポーネントがイベントのターゲットである場合、event.target
は以下の値を報告します。
"event": {
"target": {
"disabled": Boolean, // コンポーネントが無効な場合はtrue
"id": ID, // コンポーネントのID
"uid": UID, // ランタイムで生成されたコンポーネントの固有ID
"height": Number, // コンポーネントのdp単位の高さ(パディングを含む)
"opacity": Number, // コンポーネントの不透明度[0~1]
"page": Integer, // 現在のページです
"width": Number // コンポーネントのdp単位の幅(パディングを含む)
}
data
任意のデータ配列です。データ配列がバインドされている場合、Pagerはデータ配列のインフレート方法を使用します。
firstItem
このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerの先頭に追加されます。
item/items
Pagerに表示するコンポーネントとレイアウトの配列です。データプロパティが割り当てられている場合、Pagerはデータ配列のインフレート方法を使用します。データプロパティが割り当てられていない場合、Pagerは子コンポーネントの単純な配列のインフレート方法を使用します。
lastItem
このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerに追加されます。
initialPage
表示する最初のページのインデックスです。インデックスは0から始まり、デフォルトは0です。firstItem
が指定されている場合のインデックスは0になります。
navigation
navigation
プロパティは、ユーザーがコンテンツ内を移動する方法を制御します。
normal
: これがデフォルトです。ユーザーはPagerで前後に自由に移動することができます。none
: ユーザーはPagerで移動できません。ページが自動的に進行するメカニズムによって、ページが切り替わることが前提となります。wrap
: ユーザーは自由に移動することができます。最終ページの次は最初のページに戻ります。forward-only
: ユーザーは新しいページにのみ移動することができます。このモードは、ゲームやパズル向けです。
SetPage
コマンドとAutoPage
コマンドでPagerを移動できます。navigation
プロパティは画面上のスワイプによるユーザー操作のみを制限します。
onPageChanged
onPageChanged
ハンドラーは、ページが新しいページに完全に切り替わったときに実行されます。生成されるイベントの形式は次のようになります。
"event": {
"source": {
"type": "Pager",
"handler": "Page",
"id": ID, // PagerのID
"uid": UID, // ランタイムで生成されたコンポーネントの固有ID
"value": NUMBER // 新しいページのインデックス
}
}
event.source.value
は、新しいページのインデックス(0から始まるインデックス)に設定されます。
Pagerのサンプル
{
"type": "Pager",
"items": [
{
"type": "Text"
"text": "ページ#1で表示されるテキストコンテンツ"
},
{
"type": "Text"
"text": "ページ#2で表示されるテキストコンテンツ"
}
]
}