Collapsible Pane in Lightning Component Salesforce

Sample Code:

Component:

  1. <aura:component implements="force:appHostable">  
  2.       
  3.     <aura:attribute name="activeSections" type="List" default="['a']" />  
  4.     <aura:attribute name="activeSectionsMessage" type="String" default="" />  
  5.   
  6.     <div class="slds-box slds-theme_default">   
  7.           
  8.         <p>{! v.activeSectionsMessage }</p>  
  9.       
  10.         <lightning:accordion allowMultipleSectionsOpen="true"  
  11.                              onsectiontoggle="{! c.handleSectionToggle }"  
  12.                              activeSectionName="{! v.activeSections }">  
  13.               
  14.             <lightning:accordionSection name="a" label="Section A">  
  15.                   
  16.                 <aura:set attribute="body">  
  17.                       
  18.                     This is section A.  
  19.                       
  20.                 </aura:set>  
  21.                   
  22.             </lightning:accordionSection>  
  23.               
  24.             <lightning:accordionSection name="b" label="Section B">  
  25.                   
  26.                     This is section B.  
  27.                   
  28.             </lightning:accordionSection>  
  29.               
  30.             <lightning:accordionSection name="c" label="Section C">  
  31.                   
  32.                     This is section C.  
  33.                   
  34.             </lightning:accordionSection>  
  35.               
  36.         </lightning:accordion>  
  37.           
  38.     </div>  
  39.       
  40. </aura:component>  

Component Controller:

  1. ({  
  2.       
  3.     handleSectionToggle: function ( cmp, event ) {  
  4.           
  5.         var openSections = event.getParam('openSections');  
  6.   
  7.         if ( openSections.length === 0 )   
  8.             cmp.set('v.activeSectionsMessage'"All sections are closed");  
  9.         else   
  10.             cmp.set('v.activeSectionsMessage'"Open sections: " + openSections.join(', '));          
  11.           
  12.     }  
  13.       
  14. })  

Output:


All Sections Open:


All Sections Closed:


No comments:

Post a Comment