lightning tab

How To Custom Create Lightning Tabs In Lightning Component

Lightning Component
Prerequisites : basic understanding of Lightning Component and JavaScript.

In lightning components we can create two types of Tabs-:

  • Default Tab
  • Scoped Tab

we can make Tabs dynamic by using JavaScript in lightning component.

Method 1 [ Default tab]

In this method one we are use $A.util.addClass() and $A.util.removeClass() for make tabs dynamic.

Tabs dynamic
Default Tabs dynamic looks like….

TabComponent.cmp

TabComponentController.js

In above TabComponentController.js  we have 3 method for each tab.

  • in all 3 method first we get all tab list items and all tab data by aura:id.
  • then using $A.util.addClass() and $A.util.removeClass() dynamic show and hide tab and tab data.

TestApp.app


Method 2 [ Scoped tab]

In this method 2 we will use different JavaScript code for make tabs dynamic.

Tabs dynamic
Scoped Tabs dynamic looks like…

TabComponent.cmp

TabComponentController.js

TabComponentHelper.js

TestApp.app

Learn more  -: https://www.lightningdesignsystem.com/components/tabs/

https://www.lightningdesignsystem.com/components/scoped-tabs/

Like our facebook page for new post updates.?

(Visited 5,565 times, 1 visits today)

7 comments

Leave a Reply