A lightning:tabset displays a tabbed container with multiple content areas, only one of which is visible at a time. Tabs are displayed horizontally inline with content shown below it. A tabset can hold multiple lightning:tab components as part of its body. The first tab is activated by default, but you can change the default tab by setting the selectedTabId attribute on the target tab.
Use the variant attribute to change the appearance of a tabset. The variant attribute can be set to default, scoped, or vertical. The default variant underlines the active tab. The scoped tabset styling displays a closed container with a defined border around the active tab. The vertical tabset displays a scoped tabset with the tabs displayed vertically instead of horizontally.
public class TabController {
@AuraEnabled
public static List<Account> getAccounts(){
return [Select Id ,Name from Account Limit 10] ;
}
@AuraEnabled
public static List<Contact> getContacts(){
return [Select Id ,Name from Contact Limit 10] ;
}
@AuraEnabled
public static List<Campaign> getCam(){
return [Select Id ,Name from Campaign Limit 10] ;
}
@AuraEnabled
public static List<Case> getCases(){
return [Select Id ,casenumber from Case Limit 10] ;
}
}
<aura:component controller="TabController">
<aura:attribute name="obj" type="SObject[]" default="" />
<lightning:tabset variant="scoped">
<lightning:tab title="Account Details " id="accounts" onactive="{! c.handleActive }">
<aura:set attribute="label" >
Account
<lightning:icon iconName="standard:account" />
</aura:set>
<aura:set attribute="body" >
<aura:iteration items="{!v.obj}" var="item">
<ul>
<li> {!item.Name}-- {!item.Id} </li>
</ul>
</aura:iteration>
</aura:set>
</lightning:tab>
<lightning:tab title="Contact Details " id="contacts" onactive="{! c.handleActive }">
<aura:set attribute="label">
Contact
<lightning:icon iconName="standard:contact" />
</aura:set>
<aura:set attribute="body" >
<aura:iteration items="{!v.obj}" var="item">
<ul>
<li> {!item.Name}-- {!item.Id} </li>
</ul>
</aura:iteration>
</aura:set>
</lightning:tab>
<lightning:tab title="Campaign Details " id="campaign" onactive="{! c.handleActive }">
<aura:set attribute="label">
Campaign
<lightning:icon iconName="standard:campaign" />
</aura:set>
<aura:set attribute="body" >
<aura:iteration items="{!v.obj}" var="item">
<ul>
<li> {!item.Name}-- {!item.Id} </li>
</ul>
</aura:iteration>
</aura:set>
</lightning:tab>
<lightning:tab title="Case Details " id="case" onactive="{! c.handleActive }">
<aura:set attribute="label">
Case
<lightning:icon iconName="standard:case" />
</aura:set>
<aura:set attribute="body" >
<aura:iteration items="{!v.obj}" var="item">
<ul>
<li> {!item.casenumber}-- {!item.Id} </li>
</ul>
</aura:iteration>
</aura:set>
</lightning:tab>
</lightning:tabset>
</aura:component>
({
handleActive: function (cmp, event, helper) {
helper.loadData(cmp, event);
},
})
({
loadData: function (cmp, event) {
var tab = event.getSource();
switch (tab.get('v.id')) {
case 'accounts' :
this.loadContacts(cmp ,tab.get('v.id'));
break;
case 'contacts' :
this.loadContacts(cmp ,tab.get('v.id'));
break;
case 'case' :
this.loadContacts(cmp ,tab.get('v.id'));
break;
case 'campaign' :
this.loadContacts(cmp ,tab.get('v.id'));
break;
}
},
loadContacts : function(cmp ,target) {
var action ;
console.log(target);
if(target==='accounts'){
console.log(target);
action = cmp.get("c.getAccounts");
}
if(target==='contacts'){
action = cmp.get("c.getContacts");
}
if(target==='case'){
action = cmp.get("c.getCases");
}
if(target==='campaign'){
action = cmp.get("c.getCam");
}
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
console.log('response');
console.log(response.getReturnValue());
cmp.set("v.obj", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
})
Beyond Cloud 