lds1

Lightning Design System is the way to go for all your styling needs in the Lightning framework as they mimic the native look and feel of the lightning platform. Moreover, it makes your job easier by providing you with ready to use examples on their site here Lightning Design System

In my previous post I had explained how to invoke an apex class method from a lightning component and display the result on your lightning component. I hadn’t used any styling HTML tags or CSS to keep the example simple and to help the audience understand the flow rather than concentrating on the UI. However, in this post we can move a step ahead by learning how to incorporate those much needed look and feel of the Lightning experience. The best advantage of using the Lightning Design System is that unlike other UI frameworks such as Bootstrap, jQuery etc, the Lightning Design System need not be linked as a static resource in the component. Instead they are directly available as native style sheets within the platform. So, that relieves you off the overhead task of ensuring that the component points to the latest framework as and when the framework is updated.

Now, let’s take a look at the lightning component to which we will add some styling. The below component is the same component that I had used in my previous post here.

p1

The component shows above would simply render data without any styling. So, we will pickup one of the existing templates in the Lightning Design System to render them in a table form. Data tables are the way to go for this. Data tables are an enhanced version of an HTML table and are used to display tabular data in LDS.

The template for data table in LDS can be found https://www.lightningdesignsystem.com/components/data-tables

We just have to incorporate the template into our component as seen below.


<aura:component controller="LightningApexController" implements="force:appHostable">
<aura:attribute name="accts" type="Account[]" />
<lightning:button variant="brand" label="Display Data" onclick="{!c.handleClick}" />
<!-- Display Account records -->
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Type">Account Type</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accts}" var="a">
<tr>
<th scope="row" data-label="Account Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">{!a.Name}</a></div>
</th>
<td data-label="Account Type">
<div class="slds-truncate" title="Cloudhub">{!a.Type}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>

</aura:component>

This will ensure that the data is now rendered with the same look and feel as that in native Lightning Experience. The above code when rendered in Lightning Experience will look like the below. That’s it !

p2

 

Below is a wonderful video from Dreamforce which throws light on how to use the LDS !

Advertisements