APL Container（キャラクターディスプレイ）



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プロパティは、「相対」配置の要素にのみ適用されます。