Simple Custom Lightning Template

Sample Code:

Component:

  1. <aura:component implements="lightning:recordHomeTemplate">  
  2.       
  3.     <aura:attribute name = "left" type = "Aura.Component[]" />  
  4.     <aura:attribute name = "middle" type = "Aura.Component[]" />  
  5.     <aura:attribute name = "right" type = "Aura.Component[]" />  
  6.       
  7.     <div>  
  8.           
  9.         <lightning:layout >  
  10.               
  11.             <lightning:layoutItem size = "2">  
  12.                   
  13.                 {!v.left}  
  14.                   
  15.             </lightning:layoutItem>  
  16.               
  17.             <lightning:layoutItem size = "5">  
  18.                   
  19.                 {!v.middle}  
  20.                   
  21.             </lightning:layoutItem>  
  22.               
  23.             <lightning:layoutItem size = "5">  
  24.                   
  25.                 {!v.right}  
  26.                   
  27.             </lightning:layoutItem>  
  28.               
  29.         </lightning:layout>  
  30.           
  31.     </div>  
  32.       
  33. </aura:component>  

Design:

  1. <design:component>  
  2.       
  3.     <flexipage:template >  
  4.           
  5.         <flexipage:region name = "left" defaultwidth = "Medium"/>  
  6.           
  7.         <flexipage:region name = "middle" defaultwidth = "Xlarge"/>  
  8.           
  9.         <flexipage:region name = "right" defaultwidth = "Xlarge"/>  
  10.           
  11.     </flexipage:template>  
  12.       
  13. </design:component>  

Output:


No comments:

Post a Comment