この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:layout

ページ上でコンテナを配置するための反応型グリッドシステムを表します。

lightning:layout は、ページ内または別のコンテナ内でコンテナを配置するための柔軟なグリッドシステムです。デフォルトのレイアウトはモバイルファーストで、異なるデバイスで動作するように簡単に設定できます。

レイアウトは、次の属性値を設定することによってカスタマイズできます。

horizontalAlign

次の値に基づいてレイアウト項目を横方向に配置します。

center: グリッドに slds-grid_align-center クラスを追加します。この属性は、レイアウト項目を横方向に間隔なしで並べ、そのグループをコンテナの中央に配置します。
space: グリッドに slds-grid_align-space クラスを追加します。レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後にも間隔を空けます。
spread: グリッドに slds-grid_align-spread クラスを追加します。レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後はレイアウト項目になります。
end: グリッドに slds-grid_align-end クラスを追加します。レイアウト項目はグループ化されてコンテナの右側に横方向に配置されます。

verticalAlign

次の値に基づいてレイアウト項目を縦方向に配置します。

start: グリッドに slds-grid_vertical-align-start クラスを追加します。レイアウト項目はコンテナの上部に配置されます。
center: グリッドに slds-grid_vertical-align-center クラスを追加します。レイアウト項目はコンテナの中央に配置されます。
end: グリッドに slds-grid_vertical-align-end クラスを追加します。レイアウト項目はコンテナの下部に配置されます。
stretch: グリッドに slds-grid_vertical-stretch クラスを追加します。レイアウト項目はコンテナの縦いっぱいに広げて配置されます。

pullToBoundary

次の値に基づいてレイアウト項目をレイアウトの境界線に寄せます。レイアウト項目にパディングが使用されている場合、この属性はコンテナの両側にある要素を境界線まで寄せます。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 で囲むと、シンプルなレイアウトが完成します。次に例を示します。

1<aura:component>
2    <div class="c-container">
3        <lightning:layout horizontalAlign="space">
4            <lightning:layoutItem flexibility="auto" padding="around-small">
5                1
6            </lightning:layoutItem>
7            <lightning:layoutItem flexibility="auto" padding="around-small">
8                2
9            </lightning:layoutItem>
10            <lightning:layoutItem flexibility="auto" padding="around-small">
11                3
12            </lightning:layoutItem>
13            <lightning:layoutItem flexibility="auto" padding="around-small">
14                4
15            </lightning:layoutItem>
16        </lightning:layout>
17    </div>
18</aura:component>

属性

属性名	属性型	説明
`body`	Component[]	レイアウトコンポーネントのボディ。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。
`horizontalAlign`	String	レイアウト項目を横方向に広げる方法を決定します。配置オプションは、center、space、spread、end です。
`multipleRows`	Boolean	子アイテムがレイアウトの幅を超えた場合に折り返すかどうかを決定します。true の場合は、項目を次の行に折り返します。この値のデフォルトは false です。
`pullToBoundary`	String	レイアウト項目をレイアウトの境界線に寄せ、レイアウト項目のパディングサイズに対応します。使用できる値は、small、medium、large です。
`verticalAlign`	String	レイアウト項目を縦方向に広げる方法を決定します。配置オプションは、start、center、end、stretch です。

Lightning コンポーネント開発者ガイド

lightning:layout

属性