How to code 'scoped tabs' in Lightning Design System?

Question

I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/tabs/#scoped 

I will be hand-coding the markup. The HTML makes sense. But I see in the description on the web page, it has some 'javascript needs' to move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Does that mean it requires me to write custom javascript? 

Answer 1

Per the documentation

JAVASCRIPT NEEDS

The active tab has two markup requirements:

• The .slds-active class should be placed on the li with .tabs--{variant}__item.
• The corresponding .tabs--{variant}__content container receives .slds-show.

Inactive .tabs--{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.

So you will need to write JS that handles placing the slds-active classes and the slds-show/slds-hide classes when a user clicks a tab.

Answer 2

Yup, as the Lightning Design System is a Pure CSS framework, we have to write our own javascript for the components.

I have written the code to handle any type of Lightning Design Tabs(default & scoped) in my blog here: http://www.minerva18.com/blog/creating-switchable-lightning-design-tabs-in-salesforce/

And It looks like this:

_{(source: minerva18.com)}

I hope it helps, Thanks :D

Answer 3

This is a nice and clear example of how to activate/deactivate tabs:

https://sfdcmonkey.com/2016/11/23/how-to-create-lightning-tabs-in-component/