Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jlightning:flexipageRegionInfo による Lightning ページコンポーネントでの幅の認識
Lightning アプリケーションビルダーでページの範囲にコンポーネントを追加するときに、lightning:flexipageRegionInfo サブコンポーネントが親コンポーネントにその範囲の幅を渡します。lightning:flexipageRegionInfo といくつかの戦略的 CSS を使用すれば、実行時、範囲ごとに異なる表示で親コンポーネントに表示できます。
たとえば、リストビューコンポーネントは幅認識コンポーネントであるため、小さい範囲と大きい範囲で異なって表示されます。
有効な範囲幅の値は、Small、Medium、Large、Xlarge です。
CSS を使用してコンポー��ントをスタイル設定し、コンポーネントが表示される方法を判断できます。次に例を示します。
この単純なコンポーネントには、field1 と field2 の 2 つの項目があります。このコンポーネントが Small の範囲内にない場合、その範囲の幅の 50% を使用して項目が横並びで表示されます。このコンポーネントが Small の範囲内にある場合、その範囲の幅の 100% を使用して項目がリストとして表示されます。
1<aura:component implements="flexipage:availableForAllPageTypes">
2 <aura:attribute name="width" type="String"/>
3 <lightning:flexipageRegionInfo width="{!v.width}"/>
4 <div class="{! 'container' + (v.width=='SMALL'?' narrowRegion':'')}">
5 <div class="{! 'eachField f1' + (v.width=='SMALL'?' narrowRegion':'')}">
6 <lightning:input name="field1" label="First Name"/>
7 </div>
8 <div class="{! 'eachField f2' + (v.width=='SMALL'?' narrowRegion':'')}">
9 <lightning:input name="field2" label="Last Name"/>
10 </div>
11 </div>
12</aura:component>このコンポーネントで使用する CSS ファイルを次に示します。
1.THIS .eachField.narrowRegion{
2 width:100%;
3}
4.THIS .eachField{
5 width:50%;
6 display:inline-block;
7}