Play Games

Search This Blog

Tuesday, August 4, 2020

How to display multiple tabs in aura component Salesforce lightning - Salesforce Globe For You

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:

No comments:

Post a Comment