Tab

A lightning:tab component keeps related content in a single container. The tab content displays when a user clicks the tab. Use lightning:tab as a child of the lightning:tabset component.

This component implements styling from tabs in the Lightning Design System.

Use the label attribute to specify the tab’s text label.

To include an icon at the beginning of the label, use the iconName attribute. Provide alternative text for the icon using the iconAssistiveText attribute.

To include an icon at the end of the label, use the endIconName attribute. Provide alternative text for that icon using the endIconAlternativeText attribute.

Set showErrorIndicator to true to display an error indicator in the tab after the label. If an end icon is present, the error indicator is displayed after the icon.

Tab content is lazy loaded. You can only query the content for the active and previously active tabs. See lightning:tabset for more information.

You can nest lightning:tab within aura:if or aura:iteration. Otherwise, you must nest lightning:tab directly within lightning:tabset.

For example, you want to display a tab conditionally.

1<aura:component>
2  <aura:attribute name="displayMe" type="String" required="true" />
3  <lightning:tabset>
4    <aura:if isTrue="{!v.displayMe}">
5      <lightning:tab label="My Tab">
6        <!-- Your tab content -->
7      </lightning:tab>
8    </aura:if>
9  </lightning:tabset>
10</aura:component>