Friday, 14 April 2017

apex:slds - Include lightning design system by using apex tag

Arpit Sharma


To use lightning design system we don't need to upload library  to static resource and reference them in visual force page. We can include them by using apex tag i.e <apex:slds/>. here is example of include of slds in visual force page.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
  <apex:slds/>
  <apex:form>
      <!-- Without lightning designing CSS-->    
      <div >
          <label for="inputLabel">Input Label</label>
          <div>
             <input type="text" id="inputLabel"  placeholder="Without lightning designing CSS"/>  
          </div>
      </div>
      <!-- With lightning designing CSS-->
      <div class="slds-form-element">
          <label class="slds-form-element__label" for="inputLabel">Input Label</label>
          <div class="slds-form-element__control">
             <input type="text" id="inputLabel" class="slds-input" placeholder="With lightning designing CSS"/>  
          </div>
      </div>    
  </apex:form>
</apex:page>



About the Author

Arpit Sharma / Author & Editor

Certified Salesforce Developer | Salesforce Developer at Cognizant | Blogger

0 comments:

Post a comment