APL Container
Container
コンポーネントは、複数の子項目を表示します。Container
は、レイアウト言語としてFlexbox/Yogaを使用します。
プロパティ
Containerコンポーネントには、次のプロパティがあります。
- すべての複数子コンポーネントのプロパティ
- すべての基本コンポーネントのプロパティ
- 次の表は、
Container
プロパティの一覧です。列の意味はこちらを参照してください。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
|
次のいずれか: |
stretch |
◯ |
◯ |
交差軸における子の配置です。 |
|
次のいずれか: |
column |
◯ |
◯ |
子コンポーネントを表示する方向です。 |
|
次のいずれか: |
start |
◯ |
◯ |
主軸上にスペースが余っているときの、そのスペースの配置方法です。デフォルトは |
|
ブール値 |
false |
✕ |
✕ |
|
|
次のいずれか: |
|
◯ |
◯ |
子コンポーネントを複数の行にラップする方法を指定します。 |
標準の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単位の幅(パディングを含む)
}
layoutDirectionコンポーネントプロパティ
コンポーネントのlayoutDirection
プロパティは、Container
の子コンポーネントをレイアウトする方向を決定します。APL Container
は、Yoga layoutDirection
プロパティと同じルールに従います。
コンポーネントのlayoutDirection
プロパティは、Containerの子の位置を制御する次のプロパティのオーバーライド動作を決定します。
left
とright
start
とend
alignItems
子をコンテナーの交差軸方向に配置する方法に関するFlexboxの仕様です。デフォルトはstretch
です。
direction
Containerでの配置方向です。デフォルトはcolumn
です。direction
プロパティは、次の値を取ることができます。
型 | 説明 |
---|---|
|
子コンポーネントを垂直方向にレイアウトします(デフォルト)。 |
|
子コンポーネントを水平方向にレイアウトします。 |
|
子コンポーネントを垂直方向にレイアウトしますが、反対側から開始します。 |
|
子コンポーネントを水平方向にレイアウトしますが、反対側から開始します。 |
layoutDirection
プロパティは、direction
がrow
の場合に項目の水平方向を決定します。たとえば、layoutDirection
がRTL
で、direction
がrow
の場合、子項目は右から開始され、左へと表示されます。
justifyContent
主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときに適用されます。デフォルトはstart
です。
numbered
trueに設定した場合、Container
内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子のnumbering
プロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItem
とlastItem
プロパティに順序数は付けられないことに注意してください。デフォルトはfalse
です。
wrap
子のFlexboxラッピングの動作。wrap
プロパティは、次の値を取ります。
型 | 説明 |
---|---|
|
|
|
子コンポーネントは複数の行に分割できます。 |
|
子コンポーネントは複数の行に分割できますが、反対側から開始します。 |
複数子プロパティ
Container
は複数子コンポーネントです。Container
は、すべての複数子プロパティを継承します。
Containerの子コンポーネントのプロパティ
コンテナの子コンポーネントには、親Container
内での位置を制御するための追加のプロパティがあります。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
|
|
auto |
◯ |
◯ |
交差軸のレイアウト位置です。デフォルトは |
|
ディメンション |
auto |
◯ |
◯ |
下端の位置オフセットを指定します。 |
|
ディメンション |
none |
◯ |
◯ |
終端の位置オフセットです。終端は、コンポーネントの |
|
数値 |
0 |
◯ |
◯ |
正の数にすると、 |
|
ディメンション |
auto |
◯ |
◯ |
左端の位置オフセットを指定します。 |
|
|
normal |
✕ |
✕ |
次の子の順序数の付け方を指定します。デフォルトは |
|
|
relative |
◯ |
◯ |
子コンポーネントの位置を調整します。 |
|
ディメンション |
auto |
◯ |
◯ |
右端の位置オフセットを指定します。 |
|
数値 |
0 |
◯ |
◯ |
正の数にすると、Containerに十分なスペースがない場合、このコンポーネントを縦横比を保って縮小します。デフォルトは0です。 |
|
絶対ディメンション |
0 |
◯ |
◯ |
レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。 |
|
ディメンション |
none |
◯ |
◯ |
開始端の位置オフセット。開始端は、コンポーネントの |
|
ディメンション |
auto |
◯ |
◯ |
上端の位置オフセットを指定します。 |
alignSelf
子のalignItems
プロパティを上書きします。
position, bottom, left, right, top
position
プロパティは、bottom
、left
、right
、top
の各プロパティが子コンポーネントの位置を「標準」位置から調整する方法を決定します。
start
プロパティとend
プロパティは、「Container」のlayoutDirection
プロパティに基づいてleft
とright
もオーバーライドします。
絶対配置
position
がabsolute
の場合、子コンポーネントはContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。top
、bottom
、left
、right
のプロパティは親Containerのそれぞれの端を基準とする補正値です。親Containerのパディングは、絶対配置の子コンポーネントについては無視されます。
要素の大きさが固定されている絶対配置の要素では、両方が設定されている場合、top
プロパティはbottom
プロパティをオーバーライドします。left
プロパティとright
プロパティは、親ContainerのlayoutDirection
プロパティによって異なります。
- 親Containerの
layoutDirection
が「LTR」に設定されている場合 -left
が設定されている場合、right
プロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの左上に配置されます。 - 親Containerの
layoutDirection
が「RTL」に設定されている場合 -right
が設定されている場合、left
プロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの右上に配置されます。
次の例は、4つすべてのpositionプロパティを設定するコンポーネントを示しています。
{
"position": "absolute",
"width": 100,
"height": 100,
"top": 5,
"bottom": 5,
"left": 5,
"right": 5
}
Container
のlayoutDirection
がLTR
の場合、このコンポーネントは、親Containerの左上から5単位の位置に配置されます。top
とleft
が設定されているため、bottom
とright
の値は無視されます。
このContainer
のlayoutDirection
がRTL
の場合、このコンポーネントは、親Containerの右上から5単位の位置に配置されます。top
とright
が設定されているため、bottom
とleft
の値は無視されます。
相対配置
position
がrelative
の場合、bottom
、left
、right
、top
の各プロパティは、Container
内のほかのコンポーネントを基準とした、子の「通常の」位置からの寸法オフセットです。top
に値がある場合、bottom
プロパティは無視されます。left
プロパティとright
プロパティは、親ContainerのlayoutDirection
プロパティによって異なります。
- 親Containerの
layoutDirection
が「LTR」に設定されている場合 -left
が設定されている場合、right
プロパティは無視されます。 - 親Containerの
layoutDirection
が「RTL」に設定されている場合 -right
が設定されている場合、left
プロパティは無視されます。
次の例は、top
、bottom
、right
を設定するコンポーネントを示しています。
{
"position": "relative",
"top": 5,
"bottom": 20,
"right": 5
}
Container
のlayoutDirection
がLTR
の場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位左に配置されます。bottom
プロパティとright
プロパティは無視されます。
Container
のlayoutDirection
がRTL
の場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位右に表示されます。bottom
プロパティとleft
プロパティは無視されます。
追従配置
position
がrelative
の場合、bottom
、left
、right
、top
の各プロパティは、最も近いスクロール可能な祖先コンポーネントを基準に計算された寸法オフセットです。この場合、祖先コンポーネントに「追従」してコンポーネントが配置されます。
追従型コンポーネントの場合、top
プロパティとbottom
プロパティは、最も近い垂直スクロール可能なコンポーネントのそれぞれの端からのインセットを表します。left
プロパティとright
プロパティは、最も近い水平スクロール可能なコンポーネントの端からのインセットを表します。これらのプロパティは、コンポーネントの位置を拘束するために使用される「追従ビュー」の矩形を定義します。
任意の軸の追従ビューの矩形サイズが、その軸の追従型コンポーネントのデフォルト境界のサイズよりも小さい場合、影響を受ける軸の有効な終端のインセットが縮小され(おそらく負になる)、追従ビューの矩形のサイズがその軸のデフォルトの境界のサイズに達します。
次に例を示します。
最も近い垂直スクロール可能な項目の高さが300pxであり、追従型コンポーネントのデフォルトの境界の高さが200pxであると仮定します。top
プロパティは20ピクセルです。これは、最も近い祖先の上端インセットが20pxであり、下端インセットが0pxであることを意味します。したがって、追従ビューの矩形の高さは280pxになります。
しかし、最も近い垂直スクロール可能な項目の高さが100pxである場合、有効な下端インセットは-120pxになります。これにより、追従ビューの矩形の高さは200pxになります。
コンポーネントの各辺について、対応するインセットプロパティが自動ではなく、コンポーネントの対応する境界のエッジが追従ビューの矩形の対応するエッジの外側にある場合、コンポーネントは(相対配置のように)視覚的にシフトされる必要があり、その位置コンポーネントがその包含ブロック内に含まれる間は、可能な限り、追従ビューの矩形のエッジの内側にする必要があります。追従型コンポーネントをオフセットすると、その親の境界外に配置される場合、オフセットは減少し、追従型コンポーネントは親の境界内に保持されます。
追従配置された要素のtop値が自動ではなく、bottom値が自動である場合、追従配置により下方向にのみプッシュされます。上方向にオフセットされることはありません。同様に、left、right、またはbottomプロパティが自動ではなく、対応するright、left、またはtopプロパティが自動である場合、追従型コンポーネントは、それぞれ右、左、または上方向にのみプッシュされます。
同じContainer内にある複数の追従配置コンポーネントは、独立してオフセットされるため、重なり合う可能性があります。
top
プロパティまたはbottom
プロパティの値がパーセンテージの場合、最も近い垂直スクロール可能な祖先のパーセンテージです。right
プロパティまたはleft
プロパティの場合は、最も近い水平スクロール可能な祖先のパーセンテージです。
「position: sticky」であるContainerは、追従型ではない兄弟の後に描画されます。
次の例は、垂直スクロール可能なコンポーネントの上端から10単位下にあるコンポーネントを示しています。対応するright
、bottom
、またはleft
プロパティが設定されていないため、ほかのどのエッジにも追従しません。
{
"position": "sticky",
"top": 10
}
次の例では、最も近い水平スクロール可能な祖先の左側と右側の両方に追従するコンポーネントを定義します。このコンポーネントは、スクロール可能な祖先の左端に達すると、スクロール可能なコンポーネントの左端から右に10単位の位置に追従します。その結果、コンポーネントの左側10単位がビューから非表示になります。スクロール可能な祖先が左にスクロールされている場合、このコンポーネントは、スクロール可能なコンポーネントの右端から少なくとも20単位の位置に留まります。
{
"position": "sticky",
"left": -10,
"right": 20
}
追従型コンポーネントの親のデフォルトの境界を使用して、追従型コンポーネントのオフセットを制限できます。
下の画像は、スクロール可能なコンポーネント内の2つのコンポーネント(赤)と親(青)を示しています。2つのコンポーネントのposition
はそれぞれsticky
とleft
に設定され、その値はそれぞれ0pxと20pxに設定されています。
{
"type": "APL",
"version": "1.8",
"mainTemplate": {
"item": [
{
"type": "ScrollView",
"width": 500,
"height": 500,
"item": {
"type": "Container",
"height": 1000,
"width": 500,
"items": [
{
"type": "Frame",
"height": 300,
"width": 500,
"backgroundColor": "#1a73e8",
"items": [
{
"type": "Container",
"height": 300,
"width": 500,
"items": [
{
"position": "sticky",
"top": 0,
"type": "Frame",
"height": 100,
"width": 500,
"backgroundColor": "#dc3912",
"items": []
}
]
}
]
},
{
"type": "Frame",
"height": 100,
"width": 500,
"backgroundColor": "white"
},
{
"type": "Frame",
"height": 1000,
"width": 500,
"backgroundColor": "#1a73e8",
"items": [
{
"type": "Container",
"height": 300,
"width": 500,
"items": [
{
"position": "sticky",
"top": 20,
"type": "Frame",
"height": 100,
"width": 500,
"backgroundColor": "#dc3912",
"items": []
}
]
}
]
}
]
}
}
]
}
}
start、end
start
プロパティとend
プロパティを指定すると、コンポーネントの位置を指定するためのleft
とright
をオーバーライドされます。オーバーライドはlayoutDirection
プロパティに依存します。
プロパティ | 左から右("LTR") | 右から左("RTL") |
---|---|---|
|
|
|
|
|
|
次の例は、絶対配置のコンポーネントを示しています。このContainer
のlayoutDirection
がRTL
の場合、このコンポーネントは、親Containerの右上から5単位の位置に表示されます。start
プロパティ(5)はright
プロパティ(10)をオーバーライドします。
{
"position": "absolute",
"width": 100,
"height": 100,
"start": 5,
"left": 10,
"right": 10,
"top": 5
}
start
プロパティとend
プロパティを使用するには、APL 1.7以降が必要です。これらのプロパティと、コンポーネントのleft
/right
プロパティの両方を設定できます。APLの以前のバージョンでは、新しいプロパティは無視されます。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
(絶対的)である子コンポーネントでは無視されます。
最終更新日: 2021 年 11 月 09 日