How to display multiple tabs in aura component - Salesforce Globe For You
Multiple tabs.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="tabId" type="String" default="2"/>
<aura:handler name="change" value="{!v.tabId}" action="{!c.handleTabChange}"/>
<lightning:tabset aura:id="tabs" selectedTabId="{!v.tabId}">
<lightning:tab label="Tab One" id="tab1">
Tab One Content inside the tab
<lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />
</lightning:tab>
<lightning:tab label="Tab Two" id="tab2">
Tab Two Content inside the tab
<lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />
</lightning:tab>
<lightning:tab label="Tab Three" id="tab3">
Tab three Content inside the tab
<lightning:button label="Navigate To Next Tab" onclick="{!c.changeTab}" />
</lightning:tab>
</lightning:tabset>
</aura:component>
MultipleTabsController.js
({
doInit : function(component, event, helper) {
component.find("tabs").set("v.selectedTabId", "tab1");
},changeTab: function(component) {
var currentTabId = component.get("v.tabId");
if(currentTabId =='tab1') {
component.set("v.tabId", "tab2");
}
if(currentTabId =='tab2') {
component.set("v.tabId", "tab3");
}
},
handleTabChange: function(component) {
var selected = component.get("v.tabId");
component.find("tabs").set("v.selectedTabId", selected);
}
})
MultipleTabsApp.app
<aura:application extends="force:slds">
<c:MultipleTabs/>
</aura:application>
Output:
