APL Pager(1.0)
(これはAPLの最新バージョンではありません。APLの最新バージョンの資料を参照するには、その他のバージョンオプションをクリックしてください)
Pagerは、一連のコンポーネントを1つずつ表示します。通常、Pagerは、時系列に並べられたデータ項目を表示するために使用します。Pagerでは長い連続した形で項目が表示されないため、Sequenceとは異なります。
プロパティ
Pagerには、コンポーネントのプロパティに加えて、次のプロパティがあります。
プロパティ | 型 | 必須 | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
data | データ: プロパティ | ✕ | ✕ | ✕ | このContainerにバインドするデータです。 |
firstItem | コンポーネントとレイアウトの配列 | ✕ | ✕ | ✕ | 他のどの項目よりも先に含めるコンポーネントです。 |
initialPage | 整数 | ✕ | ✕ | ✕ | 最初のページの(0から始まる)インデックスです。デフォルトは0です。 |
item/items | コンポーネントとレイアウトの配列 | ◯ | ✕ | ✕ | データセットを配置するのに使用するコンポーネントです。 |
lastItem | コンポーネントとレイアウトの配列 | ✕ | ✕ | ✕ | 他のすべての項目の後に含めるコンポーネントです。 |
navigation | normal | none | wrap | forward-only | ✕ | ✕ | ✕ | 移動可能な方向を指定します。デフォルトは「normal」です。 |
Pagerは、左から右に順番に並べられた一連のページとしてユーザーに表示されます。通常、ユーザーは、Pagerを左右にスワイプしてページを切り替えます。デバイスにタッチパネルが搭載されていない場合、Pagerはキーボードの入力(左右の矢印キーまたはTabキー)に応じて移動します。
PagerとSequenceでは動作が異なります。Sequenceは、連続した項目のリストとして表示されます。画面のサイズが小さい場合、ゆっくりスワイプするとSequenceには1つの項目しか表示されませんが、コンテンツ内をすばやく移動する高速スワイプモードがサポートされているため、「高速スクロールモード」に設定するとコンテンツの複数の項目が小さく表示されます。個々の項目は、隣り合って並べられた状態で表示されます。一方、Pagerでは、前後のページのいずれかの方向に少しスワイプするだけで、それまで見ていたページから新しいページへとコンテンツが切り替わります。
指定されない場合、Pagerコンポーネントのheight
とwidth
のデフォルトは100dpです。
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
プロパティは、画面上のスワイプによるユーザー操作のみを制限します。
Pagerのサンプル
{
"type": "Pager",
"items": [
{
"type": "Text"
"text": "ページ#1で表示されるテキストコンテンツ"
},
{
"type": "Text"
"text": "ページ#2で表示されるテキストコンテンツ"
}
]
}