参考URL:
例:
pageTemplate_2_7_3.cmp
<aura:component
implements="lightning:appHomeTemplate"
description="Three columns layout"
access="global"
>
<aura:attribute name="left" type="Aura.Component[]" access="global" />
<aura:attribute name="center" type="Aura.Component[]" access="global" />
<aura:attribute name="right" type="Aura.Component[]" access="global" />
<div aura:id="container">
<lightning:layout>
<lightning:layoutItem aura:id="leftColumn" size="2">
{!v.left}
</lightning:layoutItem>
<lightning:layoutItem
aura:id="centerColumn"
size="7"
class="center"
>
{!v.center}
</lightning:layoutItem>
<lightning:layoutItem aura:id="rightColumn" size="3">
{!v.right}
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
サイズ自動調整:
<lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '6' }" class="slds-m-left_small"> {!v.right}
</lightning:layoutItem>
テンプレート種類:
lightning:appHomeTemplate
lightning:homeTemplate
lightning:recordHomeTemplate