Lightning コンポーネント開発者ガイド
jlightning:layout
ページ上でコンテナを配置するための反応型グリッドシステムを表します。
lightning:layout は、ページ内または別のコンテナ内でコンテナを配置するための柔軟なグリッドシステムです。デフォルトのレイアウトはモバイルファーストで、異なるデバイスで動作するように簡単に設定できます。
レイアウトは、次の属性値を設定することによってカスタマイズできます。
horizontalAlign次の値に基づいてレイアウト項目を横方向に配置します。
- center: グリッドに slds-grid--align-center クラスを追加します。この属性は、レイアウト項目を横方向に間隔なしで並べ、そのグループをコンテナ���中央に配置します。
- space: グリッドに slds-grid--align-space クラスを追加します。レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後にも間隔を空けます。
- spread: グリッドに slds-grid--align-spread クラスを追加します。レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後はレイアウト項目になります。
- end: グリッドに slds-grid--align-end クラスを追加します。レイアウト項目はグループ化されてコンテナの右側に横方向に配置されます。
次の値に基づいてレイアウト項目を縦方向に配置します。
- start: グリッドに slds-grid--vertical-align-start クラスを追加します。レイアウト項目はコンテナの上部に配置されます。
- center: グリッドに slds-grid--vertical-align-center クラスを追加します。レイアウト項目はコンテナの中央に配置されます。
- end: グリッドに slds-grid--vertical-align-end クラスを追加します。レイアウト項目はコンテナの下部に配置されます。
- stretch: グリッドに slds-grid--vertical-stretch クラスを追加します。レイアウト項目はコンテナの縦いっぱいに広げて配置されます。
次の値に基づいてレイアウト項目をレイアウトの境界線に寄せます。レイアウト項目にパディングが使用されている場合、この属性はコンテナの両側にある要素を境界線まで寄せます。layoutItem の padding に対応するサイズを選択します。たとえば、lightning:layoutItem="horizontalSmall" であれば、pullToBoundary="small" を選択します。
- small: グリッドに slds-grid--pull-padded クラスを追加します。
- medium: グリッドに slds-grid--pull-padded-medium クラスを追加します。
- large: グリッドに slds-grid-pull-padded-large クラスを追加します。
スタイル設定を別の方法でカスタマイズするには class 属性または multipleRows 属性を使用します。
レイアウト項目を lightning:layout で囲むと、シンプルなレイアウトが完成します。次に例を示します。
属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | レイアウトコンポーネントのボディ。 | |
| class | String | 外部要素に適用される CSS クラス。このスタイルは、コンポーネントで出力される基本クラスに追加されます。 | |
| horizontalAlign | String | レイアウト項目を横方向に広げる方法を決定します。配置オプションは、center、space、spread、end です。 | |
| multipleRows | Boolean | 子アイテムがレイアウトの幅を超えた場合に折り返すかどうかを決定します。true の場合は、項目を次の行に折り返します。この値のデフォルトは false です。 | |
| pullToBoundary | String | レイアウト項目をレイアウトの境界線に寄せ、レイアウト項目のパディングサイズに対応します。使用できる値は、small、medium、large です。 | |
| verticalAlign | String | レイアウト項目を縦方向に広げる方法を決定します。配置オプションは、start、center、end、stretch です。 |