Tab functionality in Salesforce Lightning

TabFunctionality.cmp
--------------------
<aura:component >
    <aura:attribute name="selTabId" type="string" default="1" />
 
    <lightning:tabset selectedTabId="{!v.selTabId}" >
        <lightning:tab label="Clients" id="1">
            <b>Regeneron</b><br/>
            <b>Accenture</b><br/>
            <b>IBM</b>
 
        </lightning:tab>
     
        <lightning:tab label="Technologies" id="2">
            <b>Salesforce</b><br/>
            <b>Citrix</b><br/>
            <b>RPA</b>
        </lightning:tab>
     
        <lightning:tab label="Locations" id="3">
            <b>India</b><br/>
            <b>USA</b><br/>
            <b>Canada</b>
        </lightning:tab>
     
           
    </lightning:tabset>

    <div class="slds-clearfix">
      <div class="slds-float_left">
          <!--disabled the back button on first Tab--> 
        <lightning:button disabled="{!v.selTabId == '1'}" variant="neutral" label="Back" onclick="{!c.back}" />
      </div>
      <div class="slds-float_right">
        <lightning:button variant="destructive" label="Next" onclick="{!c.next}" />
      </div>
    </div>
 
</aura:component>

Controller
---------------

({
next : function(component, event, helper) {
      // get the current selected tab value
        var currentTab = component.get("v.selTabId");
     
        if(currentTab == '1'){
          component.set("v.selTabId" , '2'); 
        }else if(currentTab == '2'){
          component.set("v.selTabId" , '3');   
        }else if(currentTab == '3'){
                      alert('Complete ');
        }
},
 
    back : function(component, event, helper) {
     // get the current selected tab value
       var currentTab = component.get("v.selTabId");
     
        if(currentTab == '2'){
          component.set("v.selTabId" , '1');   
        } else if(currentTab == '3'){
          component.set("v.selTabId" , '2');   
        }
            else if(currentTab=='1'){
                alert('yes');
            }
}
})

Lightning Application
----------------------------
<aura:application extends="force:slds">
<c:TabFunctionality/>

</aura:application>

Comments

Post a Comment