Salesforce: Integrate Lightning Design System and Lightning Components

“With the Lightning Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.” – https://www.lightningdesignsystem.com/

SLDS provides pre-defined style components like forms, tabs etc which can be used in a Lightning Component. This makes it easier to adhere to salesforce styles and keep UI consistent. You can visit https://www.lightningdesignsystem.com/ on details about how to use SLDS.

While SLDS provides styles, those are not functional; logic needs to be implemented. For example, when implementing Tabs component we need to add logic to get those tabs to switch and display appropriate content for each tab.

It stumped me for a while as I couldn’t get this to work. I was almost ready to use jQuery to get this done. But before I could jump to that, someone helped me figure out implementation logic while keeping it all native to Lightning. It turned out to be rather simple logic.

What I learned from this is, I need to stop thinking how to implement it similar to jQuery and start thinking how it all operates in Lightning Component Framework. Well, nothing to it. Let’s dive into the code to understand.

We will start by creating a simple component and adding SLDS tab component code to it.

<aura:component >    
    <aura:attribute name="activeTabNumber" type="String" default="1" />

    <ltng:require styles="{!$Resource.SLDS202 + '/assets/styles/salesforce-lightning-design-system.min.css'}"/>
	<div class="slds-tabs--default">
      <ul class="slds-tabs--default__nav" role="tablist">
        <li class="{! 'slds-tabs--scoped__item slds-text-heading--label ' + (v.activeTabNumber == '1'?'slds-active':'')}" title="Item One" role="presentation">
            <a onclick="{!c.changeTab}" class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="1" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
         </li>
        <li class="{! 'slds-tabs--scoped__item slds-text-heading--label ' + (v.activeTabNumber == '2'?'slds-active':'')}" title="Item Two"
          role="presentation">
            <a onclick="{!c.changeTab}" class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="2" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
          </li>
        <li class="{! 'slds-tabs--scoped__item slds-text-heading--label ' + (v.activeTabNumber == '3'?'slds-active':'')}" title="Item Three"
          role="presentation">
            <a onclick="{!c.changeTab}" class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="3" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a>
          </li>
      </ul>
      <div class="{! 'slds-tabs--scoped__content ' + (v.activeTabNumber == '1'? 'slds-show': 'slds-hide')}" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
      <div class="{! 'slds-tabs--scoped__content ' + (v.activeTabNumber == '2'? 'slds-show': 'slds-hide')}" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
      <div class="{! 'slds-tabs--scoped__content ' + (v.activeTabNumber == '3'? 'slds-show': 'slds-hide')}" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
    </div>
</aura:component>

Above component uses Tab component as defined in SLDS. In addition, I have made following changes:

  • Defined activeTabNumber attribute
  • Used expression when defining <li> class
  • Used expression when defining <div> class
  • Changed “tabindex” values to what I need

To understand how these work, let’s see controller code:

({
	changeTab : function(component, event, helper) {
		var selectedItem = event.currentTarget;
		component.set('v.activeTabNumber', selectedItem.getAttribute('tabindex'));
	}
})

The way it works is:

  • <a> element, which makes up the tab header, is clicked
  • changeTab() function from controller is called using “onclick” attribute of <a> tag
  • activeTabNumber attribute of component is set to “tabindex” value of clicked <a> tag
  • When activeTabNumber changes, <li> and <div> class expressions are recalculated
  • And based on recalculated logic,
    • “slds-active” class is removed from previously selected <li> and added to newly selected <li>
    • “slds-show” class is removed from previously selected <div> and added to newly selected <div>
    • “slds-hide” class is removed from newly selected <div> and added to previously selected <div>

With this simple logic, we have just got the tabs to easily switch and display related content; content can be plain text or nested components or any other logic.

And last, but not least, let’s create a .app container to test component

<aura:application >
    <c:SLDSTabs_cmp />
</aura:application>

I hope this was helpful.

Leave a Reply