APL Container



APL Container

Containerは、レイアウト言語としてFlexbox/Yogaを使用するレイアウトです。

プロパティ

Containerにはコンポーネントのプロパティの他にも、次のプロパティがあります。

プロパティ 型/値 必須 スタイル設定 説明
alignItems stretch | center | start | end | baseline 交差軸における子の配置です。デフォルトはstretchです。
data データ このContainerにバインドするデータです。
direction column | row 子コンポーネントを配置する方向です。デフォルトはcolumnです。
firstItem コンポーネントとレイアウトの配列 ほかのどの項目よりも先に含めるコンポーネントです。
item/items コンポーネントとレイアウトの配列 データセットを配置するのに使用するコンポーネントです。
justifyContent start | end | center | spaceBetween | spaceAround 主軸上にスペースが余っているときの、そのスペースの配置方法です。デフォルトはstartです。
lastItem コンポーネントのプロパティ ほかのすべての項目の後に含めるコンポーネントです。
numbered ブール値 trueを指定した場合、子に番号が順番に割り当てられます。デフォルトはfalseです。

標準的なFlexboxコンテナーと違い、APL Containerは、ScrollView内に配置された場合を除き、スクロールしません。

alignItems

子をContainerの交差軸方向に配置する方法に関するFlexboxの仕様です。デフォルトはstretchです。

data

任意のデータ配列です。データ配列がバインドされている場合、Containerはデータ配列のインフレート方法を使用します。

direction

Containerでの配置方向です。デフォルトはcolumnです。

firstItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントがContainerの先頭に追加されます。

item/items

Containerに表示するコンポーネントの配列です。

lastItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントがContainerの後に追加されます。

justifyContent

主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときにのみ役立ちます。デフォルトはstartです。

numbered

trueに設定した場合、Sequence内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子のnumberingプロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItemlastItemに順序数は付けられないことに注意してください。デフォルトはfalseです。

子Container

子Containerには、親Containerに子を配置する方法を制御する追加プロパティがあります。子Containerでは、次のプロパティを追加で使用できます。このプロパティはContainerが子を配置するのに使用します。

プロパティ 必須 スタイル設定 説明
alignSelf auto | start | end | center | baseline | stretch 交差軸のレイアウト位置です。デフォルトはautoです。
bottom ディメンション 親Containerの下端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはautoです。
grow 数値 正の数にすると、Containerに余分なスペースがある場合はこのコンポーネントは拡大します。デフォルトは0です。
left ディメンション 親Containerの左端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。
numbering ディメンション 次の子の順序数の付け方を指定します。デフォルトはnormalです。
position relative | absolute absoluteの場合、このコンポーネントは親Containerの位置だけを考慮して配置が決められます。デフォルトは「relative」です。
right ディメンション 親Containerの右端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはautoです。
shrink 数値 正の数にすると、Containerに十分なスペースがない場合はこのコンポーネントは縮小します。デフォルトは0です。
spacing ディメンション レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。現時点では、spacingプロパティはサポートされていません。
top ディメンション 親Containerの上端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。

alignSelf

この子のalignItemsプロパティを上書きします。

position、bottom、left、right、top

positionが「absolute」に設定されている場合、この子はContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。topbottomleftrightのプロパティは親Containerのそれぞれの端を基準とする補正値です。

grow、shrink

Flexboxのgrowshrinkのプロパティです。growが正の値の場合、Containerに余分なスペースがあればコンポーネントを縦横比はそのままで拡大します。shrinkが正の値の場合、Containerに余分なスペースがなければコンポーネントを標準サイズ以下に縮小します。

numbering

親でnumberedが設定されている場合に、順序数の値を制御します。このプロパティは、Sequenceの現在の子ではなく、次の子について順序数の値の指定方法を制御するものです。

  • normal: 次の子の順序数は、現在の順序数に1を足したものになります。
  • skip: 次の子の順序数は、現在の順序数と同じになります。
  • reset: 次の子の順序数は1になります。

spacing

Sequence内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。Sequenceの最初の項目では無視されます。すべてのスペースは絶対値のディメンションで指定する必要があります。相対ディメンションはサポートされていません。