I have added a
<lightning:tab>
in a lightning component. On button click I want to add this new tab.
Is there any way to do this. Please suggest.
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this communityI do not know your complete usecase but you can use aura:iteration to create new tabs.
<aura:attribute name="v.tabList" type="List"/>
<lightning:tabset aura:id="tabset" >
<aura:iteration items="{!v.tabList}" var="item">
<lightning:tab id="{!item.id>>
</lightning:tab>
</aura:iteration>
</lightning:tabset>
and you can dynamically add and remove items from tabList to add or remove tabs.
You could use the $A.createComponent(String type, Object attributes, function callback) method.
If you have a button in your component, let it call a method that implements the following code:
$A.createComponent(
"lightning:tab",
{
"title": "Your dynamic Tab" //you can add more variables here
},
function(newTab, status, errorMessage){
//Add the new tab to the body array
if (status === "SUCCESS") {
var body = cmp.get("v.body");
body.push(newTab);
cmp.set("v.body", body);
}
}
);
You also need to add {!v.body}
expression to your component where you want your tab.
$A.createComponent Method
however dynamically generated components tend to give errors in future specially while firing and capturing events. If you want to dynamically add/ remove tab you can either show or hide them or use LDS tabs. – manjit5190 Jan 5 '17 at 12:22