APL Container(1.4)
Container
コンポーネントは、複数の子項目を表示します。Container
は、レイアウト言語としてFlexbox/Yogaを使用します。
プロパティ
Containerコンポーネントには、次のプロパティがあります。
- すべての多子コンポーネントのプロパティ
- すべての基本コンポーネントのプロパティ
- 次の表に示す
Container
のプロパティ列の意味については、こちらを参照してください。
プロパティ | 型/値 | デフォルト | スタイル設定 | 動的 | 説明 | |
---|---|---|---|---|---|---|
alignItems |
stretch 、center 、start 、end 、baseline |
stretch | ✕ | ✕ | 交差軸における子の配置です。 | |
direction |
column 、row |
column | ✕ | ✕ | 子コンポーネントを表示する方向です。 | |
justifyContent |
start 、end 、center 、spaceBetween 、spaceAround |
start | ✕ | ✕ | 主軸上にスペースが余っているときの、そのスペースの配置方法です。デフォルトはstart です。 |
|
numbered |
ブール値 | false | ✕ | ✕ | true を指定した場合、子に番号が順番に割り当てられます。デフォルトはfalse です。 |
|
wrap |
noWrap | wrap |
wrapReverse |
noWrap |
✕ | ✕ | 子コンポーネントを複数の行にラップする方法。 |
標準のFlexboxコンテナとは異なり、APLContainer
コンポーネントはスクロールしません。スクロールコンポーネントを作成するには、ScrollView
内にContainer
を配置します。
Container
がソースまたはイベントのターゲットである場合、event.source
またはevent.target
に以下の値が報告されます。
{
// Container固有の値
"type": "Container",
// 一般的なコンポーネントの値
"bind": Map, // コンポーネントのデータバインディングコンテキストへのアクセス
"checked": Boolean, // チェック済みの状態
"disabled": Boolean, // 無効化の状態
"focused": Boolean, // フォーカス状態
"height": Number, // コンポーネントのdp単位の高さ(パディングを含む)
"id": ID, // コンポーネントのID
"opacity": Number, // コンポーネントの不透明度[0~1]
"pressed": Boolean, // 押された状態
"uid": UID, // ランタイムで生成されたコンポーネントの固有ID
"width": Number // コンポーネントのdp単位の幅(パディングを含む)
}
alignItems
子をコンテナーの交差軸方向に配置する方法に関するFlexboxの仕様です。デフォルトはstretch
です。
direction
Containerでの配置方向です。デフォルトはcolumn
です。direction
プロパティは、次の値を取ることができます。
型 | 説明 |
---|---|
column |
子コンポーネントを垂直方向にレイアウトします(デフォルト)。 |
row |
子コンポーネントを水平方向にレイアウトします。 |
columnReverse |
子コンポーネントを垂直方向にレイアウトしますが、反対側から開始します。 |
rowReverse |
子コンポーネントを水平方向にレイアウトしますが、反対側から開始します。 |
justifyContent
主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときに適用されます。デフォルトはstart
です。
numbered
trueに設定した場合、Container
内の各項目にデータバインディングの順序数が設定されます。 この順序数は「1」から始まり、子の
numbering
プロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItem
とlastItem
プロパティに順序数は付けられないことに注意してください。デフォルトはfalse
です。
wrap
子のFlexboxラッピングの動作。wrap
プロパティは、次の値を取ります。
型 | 説明 |
---|---|
noWrap |
Container は、主軸上の1行に子をレイアウトします。Container はオーバーフローする可能性があります。(デフォルト) |
wrap |
子コンポーネントは複数の行に分割できます。 |
wrapReverse |
子コンポーネントは複数の行に分割できますが、反対側から開始します。 |
多子プロパティ
Container
は多子コンポーネントです。Container
は、すべての多子プロパティを継承します。
コンテナの子コンポーネント
コンテナの子コンポーネントには、親Container
内での位置を制御するための追加のプロパティがあります。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
alignSelf |
auto 、start 、end 、center 、baseline 、stretch |
auto | ✕ | ✕ | 交差軸のレイアウト位置です。デフォルトはauto です。 |
bottom |
ディメンション | none | ✕ | ✕ | 親Containerの下端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはauto です。 |
grow |
数値 | 0 | ✕ | ✕ | 正の数にすると、Container に余分なスペースがある場合はこのコンポーネントは拡大します。デフォルトは0です。 |
left |
ディメンション | none | ✕ | ✕ | 親Containerの左端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。 |
numbering |
normal 、skip 、reset |
normal | ✕ | ✕ | 次の子の順序数の付け方を指定します。デフォルトはnormal です。 |
position |
relative 、absolute |
relative | ✕ | ✕ | absolute の場合、このコンポーネントは親Containerの位置だけを考慮して配置が決められます。デフォルトは「relative」です。 |
right |
ディメンション | none | ✕ | ✕ | 親Containerの右端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはauto です。 |
shrink |
数値 | 0 | ✕ | ✕ | 正の数にすると、Containerに十分なスペースがない場合はこのコンポーネントは縮小します。デフォルトは0です。 |
spacing |
絶対ディメンション | 0 | ✕ | ✕ | レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。現時点では、spacingプロパティはサポートされていません。 |
top |
ディメンション | none | ✕ | ✕ | 親Containerの上端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。 |
alignSelf
子のalignItems
プロパティを上書きします。
position, bottom, left, right, top
position
が「absolute」の場合、子はContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。top
、bottom
、left
、right
のプロパティは親Containerのそれぞれの端を基準とする補正値です。
要素の大きさが固定されている絶対配置の要素では、両方に値がある場合、left
プロパティはright
プロパティをオーバーライドします。両方の値がある場合、top
プロパティはbottom
プロパティを上書きします。どちらのプロパティにも値がない場合、Container
は親コンテナの左上に要素を配置します。
たとえば、次の子コンポーネントはその親コンテナの右上から5単位離れた位置に表示されます。bottom
の5
の設定は無視されます。
{
"position": "absolute",
"width": 100,
"height": 100,
"top": 5,
"bottom": 5,
"right": 5
}
grow、shrink
Flexboxのgrow
とshrink
のプロパティです。grow
が正の値の場合、Containerに余分なスペースがあればコンポーネントを縦横比はそのままで拡大します。shrink
が正の値の場合、Containerに余分なスペースがなければコンポーネントを標準サイズ以下に縮小します。
負のgrow
値およびshrink
値は無視されます。
numbering
親でnumberedが設定されている場合に、順序数の値を制御します。このプロパティは、Sequenceの現在の子ではなく、次の子について順序数の値の指定方法を制御します。
normal
: 次の子の順序数は、現在の順序数に1を足したものになります。skip
: 次の子の順序数は、現在の順序数と同じになります。reset
: 次の子の順序数は1になります。
spacing
レイアウト内でこのコンポーネントと前の子コンポーネントの間に追加するスペースの大きさです。レイアウトの最初の項目では無視されます。スペースは絶対ディメンションで指定します。spacing
プロパティは、相対ディメンションをサポートしていません。
spacing
プロパティは、position
がrelative
(相対的)な子コンポーネントに適用されます。このプロパティは、 position
が absolute
(絶対的)である子コンポーネントでは無視されます。