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 or scoped. The default variant underlines the active tab. The scoped tabset styling displays a closed container with a defined border around the active tab.
This component inherits styling from tabs in the Lightning Design System.
Here is an example.
<aura:component> <lightning:tabset> <lightning:tab label="Item One"> Sample Content One </lightning:tab> <lightning:tab label="Item Two"> Sample Content Two </lightning:tab> </lightning:tabset> </aura:component>
You can lazy load content in a tab by using the onactive attribute to inject the tab body programmatically. Here's an example with two tabs, which loads content when they're active.
<lightning:tabset variant="scoped"> <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" /> <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" /> </lightning:tabset>
In your client-side helper, pass the tab that's selected before adding your content using $A.createComponent().
({ handleActive: function (cmp, event) { var tab = event.getSource(); switch (tab.get('v.id')) { case 'accounts' : this.injectComponent('c:myAccountComponent', tab); break; case 'cases' : this.injectComponent('c:myCaseComponent', tab); break; } }, injectComponent: function (name, target) { $A.createComponent(name, { }, function (contentComponent, status, error) { if (status === "SUCCESS") { target.set('v.body', contentComponent); } else { throw new Error(error); } }); } })
When you load more tabs than can fit the width of the view port, the tabset provides navigation buttons for the overflow tabs.
This component creates its body during runtime. You won’t be able to reference the component during initialization. You can set your content using value binding with component attributes instead.
For example, you can't create a lightning:select component in a tabset by loading the list of options dynamically during initialization using the init handler. However, you can create the list of options by binding the component attribute to the values. By default, the option's value attribute is given the same value as the option passed to it unless you explicitly assign a value to it.
<aura:component> <aura:attribute name="opts" type="List" default="['red', 'blue', 'green']" /> <lightning:tabset> <lightning:tab label="View Options"> <lightning:select name="colors" label="Select a color:"> <aura:iteration items="{!v.opts}" var="option"> <option>{! option }</option> </aura:iteration> </lightning:select> </lightning:tab> </lightning:tabset> </aura:component>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | ComponentDefRef[] | The body of the component. This could be one or more lightning:tab components. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
onselect | Action | The action that will run when the tab is clicked. | |
selectedTabId | String | Allows you to set a specific tab to open by default. If this attribute is not used, the first tab opens by default. | |
variant | String | The variant changes the appearance of the tabset. Accepted variants are default and scoped. |