Control Lightning Tab With Next And Back Buttons In Lightning Component

Hi Guys, Today in this post, we are going to create a sample lightning component to control <lightning:tab> with Next and Back buttons. In this sample code we are using the lightning:tab and lightning:tabset standard component for create tabs in lightning component.

View As Lightning Web Component [LWC]

Lightning Component : LightningTabs.cmp

<!--
  Source : sfdcmonkey.coom
  Date : 11/6/2017
  Update : N/A
 -->
<aura:component >
    <aura:attribute name="selTabId" type="string" default="1" />
    
    <lightning:tabset selectedTabId="{!v.selTabId}" >
        <lightning:tab label="Fruits" id="1">
            <p>Apple</p>
            <p>Banana</p>
            <p>Mango</p>
        </lightning:tab>
        
        <lightning:tab label="Vegetables" id="2">
            <p>Potato</p>
            <p>Tomato</p>
            <p>Carrots</p>
        </lightning:tab>
        
        <lightning:tab label="Colors" id="3">
            <p>Red</p>
            <p>Green</p>
            <p>Blue</p>
        </lightning:tab>
        
         <lightning:tab label="Cars" id="4">
            <p>BMW</p>
            <p>Maserati</p>
            <p>Audi</p>
        </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="brand" label="Next" onclick="{!c.next}" />
      </div>
    </div>
    
</aura:component>

JavaScript Controller : LightningTabsController.js

({
	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'){
          component.set("v.selTabId" , '4');             
        }else if(currentTab == '4'){
             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 == '4'){
          component.set("v.selTabId" , '3');     
        } 
	}
})

demo.app [Lightning Application]

<aura:application extends="force:slds">
    <c:LightningTabs/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output:

Related Resource:

• lightning:tab
• lightning:tabset

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂

Also Check : How To Create Custom Lightning Tabs In Lightning Component