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 クラス。 | |
| title | String | マウスポインタが要素に重ねられたときにツールチップテキストを表示します。 | |
| flexibility | Object | コンテナ内の追加スペースに合わせて拡大したり、スペースが小さい場合は縮小したりできるように、項目を流動的にします。使用できる値は、auto (スペースに合わせて列が均等に拡大または縮小されます)、shrink (スペースが小さくなると、列が均等に縮小されます)、no-shrink (スペースが小さくなっても列が縮小されません)、grow (スペースが大きくなると列が均等に拡大されます)、no-grow (スペースが大きくなっても列が拡大されません)、no-flex (スペースが変わっても列が拡大または縮小されません) です。複数のオプションを使用するには、カンマ区切りの値を使用します (「auto, no-shrink」など)。 | |
| 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 の整数で表されます。 |