APL Container(キャラクターディスプレイ)
Containerは、レイアウト言語としてFlexbox/Yoga(https://github.com/facebook/yoga)を使用するレイアウトです。
Containerのプロパティ
プロパティ | 型 | デフォルト | 動的 | 説明 |
---|---|---|---|---|
alignItems | stretch | center | start | end | stretch | ✕ | 交差軸における子の配置です。 |
data | 配列 | <none> | ✕ | このContainerにバインドするデータです。 |
direction | column | row | column | ✕ | 子コンポーネントを配置する方向です。 |
firstItem | コンポーネントとレイアウトの配列 | <none> | ✕ | 他のどの項目よりも先に含めるコンポーネントです。 |
items | コンポーネントとレイアウトの配列 | [] | ✕ | データセットを配置するのに使用するコンポーネントです。 |
justifyContent | start | end | center | spaceBetween | spaceAround | start | ✕ | 主軸上にスペースが余っているときの、そのスペースの配置方法です。 |
lastItem | コンポーネントとレイアウトの配列 | <none> | ✕ | 他のすべての項目の後に含めるコンポーネントです。 |
APL-T Containerはスクロールしません。
Containerがイベントのターゲットである場合(イベントの定義を参照)、以下の値がevent.target
に報告されます。
"event": {
"target": {
"disabled": Boolean, // コンポーネントが無効の場合はtrue
"id": ID, // コンポーネントのID
"uid": UID, // ランタイムで生成されたコンポーネントの固有ID
"height": Number, // コンポーネントの文字単位の高さ(パディングを含む)
"width": Number // コンポーネントの文字単位の幅(パディングを含む)
}
}
alignItems
子をコンテナーの交差軸方向に配置する方法に関するFlexboxの仕様です。
data
任意のデータ配列です。データ配列がバインドされている場合、Containerはデータ配列のインフレート方法(データ配列)を使用します。
direction
コンテナーでの配置方向です。デフォルトはcolumnです。
firstItem
このプロパティが割り当てられた場合、1つの子のみのインフレート方法(1つの子のみ)を使用して、1つのコンポーネント/レイアウトがContainerの先頭に追加されます。
item(items)
Containerに表示するコンポーネントとレイアウトの配列です。データプロパティが割り当てられている場合、Containerはデータ配列のインフレート方法(データ配列)を使用します。データプロパティが割り当てられていない場合、Containerは子コンポーネントの単純な配列のインフレート方法(子コンポーネントの単純な配列)を使用します。
lastItem
このプロパティが割り当てられた場合、1つの子のみのインフレート方法(1つの子のみ)を使用して、1つのコンポーネントがContainerの末尾に追加されます。
justifyContent
主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときにのみ役立ちます。
子Container
子Containerには、親Containerに子を配置する方法を制御する追加プロパティがあります。
プロパティ | 型 | デフォルト | 動的 | 説明 |
---|---|---|---|---|
alignSelf | auto | start | end | center | baseline | stretch | auto | ✕ | 交差軸のレイアウト位置です。 |
bottom | ディメンション | <none> | ✕ | 絶対位置を指定する場合にのみ使用します。親Containerの下端からの距離を指定します。 |
grow | 数値 | 0 | ✕ | 正の数にすると、Containerに余分なスペースがある場合はこのコンポーネントは拡大します。 |
left | ディメンション | <none> | ✕ | 絶対位置を指定する場合にのみ使用します。親Containerの左端からの距離を指定します。 |
position | relative | absolute | relative | ✕ | absoluteの場合、このコンポーネントは親Containerの位置を考慮して配置が決められます。 |
right | ディメンション | <none> | ✕ | 絶対位置を指定する場合にのみ使用します。親Containerの右端からの距離を指定します。 |
shrink | 数値 | 0 | ✕ | 正の数にすると、Containerに十分なスペースがない場合はこのコンポーネントは縮小します。 |
spacing | 絶対ディメンション | 0 | ✕ | 相対位置を指定する場合にのみ使用します。これと前のコンポーネントとの間に追加するスペースです。 |
top | ディメンション | <none> | ✕ | 絶対位置を指定する場合にのみ使用します。親Containerの上端からの距離を指定します。 |
alignSelf
子のalignItemsプロパティを上書きします。
position、bottom、left、right、top
positionが「absolute」に設定されている場合、子はContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。top、bottom、left、rightのプロパティは親Containerのそれぞれの端を基準とする補正値です。親Containerのパディングは、絶対配置の子については無視されます。
要素のサイズが固定されている「絶対」位置要素では、leftプロパティがrightプロパティを上書きし(いずれも設定されている場合)、topプロパティがbottomプロパティを上書き(いずれも設定されている場合)します。どちらも設定されていない場合、要素は親Containerの左上に配置されます。たとえば、次のコンポーネントはその親Containerの右上から5単位離れた位置に配置されます。
{
"position": "absolute",
"width": 10,
"height": 10,
"top": 5,
"bottom": 5, // 「top」が設定されたので無視される
"right": 5
}
grow
Flexboxのgrowプロパティです。growが正の値の場合、Containerに余分なスペースがあれば、コンポーネントを縦横比はそのままで拡大します。growが負の値の場合は無視されます。
shrink
Flexboxのshrinkプロパティです。shrinkが正の値の場合、Containerに余分なスペースがなければ、コンポーネントを標準サイズ以下に縮小します。shrinkが負の値の場合は無視されます。
spacing
Sequence内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。Sequenceの最初の項目では無視されます。spacingは絶対ディメンションで指定する必要があります。相対ディメンションはサポートされていません。spacingプロパティは、「相対」配置の要素にのみ適用されます。