1

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).

2
  • i think you can achieve this in controller, having separate Ids for Tabs.
    – Raj_SFDC
    May 30, 2016 at 13:51
  • aura:ids or regular html ids? also, let's say I give a different id for each tab/content, how can I reach them? I mean, I can't run over them explicitly by name (I can, but i shouldn't) and I need to iterate over the children of a component.. any way to do that then?
    – Poster
    May 31, 2016 at 6:04

2 Answers 2

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');
    }
})
0

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

1
  • Unfortunately SLDSX doesn't look like it's been fixed up for Locker yet. I tried loading it in my dev edition org and when I turn on Locker, the reference app throws errors just trying to load.
    – Charles T
    Jul 5, 2016 at 15:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .