A real-world application involves UI widgets such as lists, tables, cards, modal, and many more. For its Lightning Experience UI, Salesforce uses a common design pattern, which is an open source project known as the Lightning Design System. You can read more about the Lightning Design System, and the patterns and components provided from the official documentation located at https://www.Lightningdesignsystem.com.
Lightning Components can use the styles provided by the Lightning Design System. Let's modify our HelloWorld
component to display HelloWorld
in a card format, using the card components provided by the Salesforce Lightning Design System (SLDS).
Let's open the Helloworld
application we have built so far again and modify it to include the SLDS:
- To open the existing Lightning Component, in
Developer Console
, useFile
|Open Lightning Resource
, search for theHelloWorld
component, and selectOpen Selected
. - Copy the code that is in the SLDS card component from SLDS (https://www.Lightningdesignsystem.com/components/cards/).
- Paste the markup as it is on the
HelloWorld
component file. You will get an error, as shown in the following screenshot:
Error when you try using SVG tags in component markup
- The error is because of the
SVG
tag (we will see how to useSVG
tags in later chapters). Let's remove the highlighted portion for now to allow the save operation. The complete code for the component is as follows:
<aura:component > <article class="slds-card"> <div class="slds-card__header slds-grid"> <header class="slds-media slds-media_center slds-has-flexi-truncate"> <div class="slds-media__figure"> </div> <div class="slds-media__body"> <h2> <a href="JavaScript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]"> <span class="slds-text-heading_small">Card Header</span> </a> </h2> </div> </header> <div class="slds-no-flex"> <button class="slds-button slds-button_neutral">New</button> </div> </div> <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div> <footer class="slds-card__footer">Card Footer</footer> </article> </aura:component>
- Also, to make sure SLDS is imported into the shell application for testing, we will need to extend the application to use the
force:slds
base component. Let's modify ourHelloworldApp
as follows:
<aura:application extends="force:slds"> <c:HelloWorld /> </aura:application>
- Let's preview the application and see the SLDS card in the browser. The following screenshot shows the results rendered on the browser:
Note
If you drag these components into the Lightning App Builder, the SLDS will be automatically imported by Salesforce, but for the application created using <aura:application>
useextends="force:slds"
.
The preceding is a simple demonstration of how to use the Salesforce SLDS in Lightning Component Framework. The Lightning Component framework is pretty powerful and provides many components and patterns. As a designer, you can build a complete application using the component set provided. Through this book, as we move ahead, we will use the SLDS extensively to build the UI for our components.