Creating a tab on a lightning component using aura and lightning design system

Question

Trying to use the css from https://www.lightningdesignsystem.com/components/tabs/#flavor-default to create a tab on my component. In the documentation they say i need to toggle classes on different objects to make it work like a tab:

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.

I saw that you can use $A.utils.find() to find an object by a specific aura:id, but how then I go over all the other objects and remove the .slds-active/.slds-show classes?

With jQuery I could simply search by class/id, but I'm trying to achieve this without jQuery and just using tools given by the Aura framework (I would expect it to be possible with there existing an option in the Lightning Design System).

Answer 1

So I figured out a way to do this (hence adding it as an answer), but it feels very very ugly, and I'm sure I'm not using some basic Aura abilities.. so any improvements are more than welcome. Here's the code:

Component markup:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <div class="slds-tabs--default">
        <ul class="slds-tabs--default__nav" role="tablist">
            <li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label slds-active" title="Active" onclick="{!c.changeTab}"
                role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Active</a></li>
            <li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label" title="Previous" onclick="{!c.changeTab}"
                role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Previous</a></li>
        </ul>
        <div aura:id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
        <div aura:id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
    </div>
</aura:component>

Helper (used to find the div I clicked in):

({
    getContainerDiv: function(event, element) {
        var elem;
        if (!element) {
            elem = event.srcElement;
        }
        else {
            elem = element;
        }

        if (elem.classList.contains('slds-tabs--default__item')) {
            return elem;
        }
        else {
            return this.getContainerDiv(event, elem.parentElement);
        }
    }
})

JS Controller (main logic):

({
    changeTab: function(component, event, helper) {
        var clickedTab = helper.getContainerDiv(event, null);
        var tabs =  component.find('tabpage');
        for(idx = 0; idx < tabs.length; idx++)
         {
             tab = tabs[idx].elements[0];
             $A.util.removeClass(tab, 'slds-active');
             $A.util.removeClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-show');
             $A.util.addClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-hide');
         }

        $A.util.addClass(clickedTab, 'slds-active');
        $A.util.addClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-show');
        $A.util.removeClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-hide');
    }
})

Answer 2

There's a tab component available in the SLDSX repository on GitHub:

https://github.com/ForceDotComLabs/sldsx

With a little cut and past you can get a custom Tabs component up pretty quickly.

I've utilized a number of the "samples" in this repository to jump start my development. They are also a good set of tutorial like examples demonstrating some of the next level of functionality above the trailheads.

Another option is you can copy/paste in the components out of the aura framework Github repository. Not sure how well they'll work under the locker service restrictions but I've found them useful for understanding how to implement my own versions of items.

https://github.com/forcedotcom/aura/tree/master/aura-components/src/main/components/ui