Lightning コンポーネント開発者ガイド
jlightning:layoutItem
lightning:layout の基本要素。
lightning:layoutItem は、lightning:layout 内の基本要素です。lightning:layout 内に 1 つ以上のレイアウト項目を配置できます。lightning:layoutItem の属性を使用して、レイアウト項目のサイズを設定し、さまざまなデバイスサイズでレイアウトが設定される方法を変更できます。
レイアウトシステムはモバイルファーストです。size 属性と smallDeviceSize 属性の両方が指定されている場合、size 属性は小さい携帯電話に適用され、smallDeviceSize はスマートフォンに適用されます。サイズ設定属性は付加的で、そのサイズ以上の大きさのデバイスに適用されます。たとえば、mediumDeviceSize=10 で largeDeviceSize が設定されていない場合、mediumDeviceSize はタブレットに加えてデスクトップやさらに大きいデバイスにも適用されます。
smallDeviceSize、mediumDeviceSize、largeDeviceSize のいずれかの属性が指定されている場合は、size 属性が必要です。
次に例を示します。
1<aura:component>
2 <div>
3 <lightning:layout>
4 <lightning:layoutItem padding="around-small">
5 <div>1</div>
6 </lightning:layoutItem>
7 <lightning:layoutItem padding="around-small">
8 <div>2</div>
9 </lightning:layoutItem>
10 <lightning:layoutItem padding="around-small">
11 <div>3</div>
12 </lightning:layoutItem>
13 <lightning:layoutItem padding="around-small">
14 <div>4</div>
15 </lightning:layoutItem>
16 </lightning:layout>
17 </div>
18</aura:component>属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | 外部要素に適用される CSS クラス。このスタイルは、コンポーネントで出力される基本クラスに追加されます。 | |
| flexibility | Object | コンテナ内の追加スペースに合わせて拡大したり、スペースが小さい場合は縮小したりできるように、項目を流動的にします。有効な値は auto、shrink、no-shrink、grow、no-grow、no-flex です。 | |
| largeDeviceSize | Integer | ビューポートが 12 個の部分に分割されている場合、この属性はデスクトップよりも大きいデバイス種別でコンテナが占める相対スペースを示します。1 ～ 12 の整数で表されます。 | |
| mediumDeviceSize | Integer | ビューポートが 12 個の部分に分割されている場合、この属性はタブレットよりも大きいデバイス種別でコンテナが占める相対スペースを示します。1 ～ 12 の整数で表されます。 | |
| padding | String | コンテナの右側と左側、またはコンテナのすべての辺のパディングを設定します。有効な値は、horizontal-small、horizontal-medium、horizontal-large、around-small、around-medium、around-large です。 | |
| size | Integer | ビューポートが 12 個の部分に分割されている場合、size はコンテナが占める相対スペースを示します。1 ～ 12 の整��で表されます。この属性はすべてのデバイス種別に適用されます。 | |
| smallDeviceSize | Integer | ビューポートが 12 個の部分に分割されている場合、この属性はモバイルよりも大きいデバイス種別でコンテナが占める相対スペースを示します。1 ～ 12 の整数で表されます。 |