APL Container



APL Container

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

プロパティ

Containerコンポーネントには、コンポーネントのプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

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

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

Containerコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
   "target": {
     "disabled": Boolean, // コンポーネントが無効な場合はtrue
     "id": ID,            // コンポーネントのID
     "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
     "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
     "opacity": Number,   // コンポーネントの不透明度[0～1]
     "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
   }
}

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ずつ増加します。firstItemとlastItemに順序数は付けられないことに注意してください。デフォルトはfalseです。

子Container

子Containerには、親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の左上に配置されます。たとえば、次のコンポーネントはその親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

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

Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment