function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
S SaiS Sai 

how to create page sections in lighting components

Hi All,
How to create page block sections in lighting components 
Thanks 
Sai
Best Answer chosen by S Sai
isalewisalew
Visually, the closest option might be to use form styling from the lightning design system (http://www.lightningdesignsystem.com/components/forms/). The following code and screenshot are pulled from the Edit Dialog for Touch (http://www.lightningdesignsystem.com/components/forms/) example. Of course, these section headers are not animated to collapse a section by default. Depending on the requirement, you could use a conditional expression or a controller action to apply and remove the "slds-hide" class to the div immediately below the header.

<pre>
<h3 class="slds-section-title--divider">Section Information</h3>
<div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputNameSample1">Name Suffix</label>
    <div class="slds-form-element__control">
      <input id="inputNameSample1" class="slds-input" type="text" placeholder="Ms." />
    </div>
  </div>
</div>
</pre>

Screenshot of Form using Lightning Design System
 

All Answers

isalewisalew
Visually, the closest option might be to use form styling from the lightning design system (http://www.lightningdesignsystem.com/components/forms/). The following code and screenshot are pulled from the Edit Dialog for Touch (http://www.lightningdesignsystem.com/components/forms/) example. Of course, these section headers are not animated to collapse a section by default. Depending on the requirement, you could use a conditional expression or a controller action to apply and remove the "slds-hide" class to the div immediately below the header.

<pre>
<h3 class="slds-section-title--divider">Section Information</h3>
<div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputNameSample1">Name Suffix</label>
    <div class="slds-form-element__control">
      <input id="inputNameSample1" class="slds-input" type="text" placeholder="Ms." />
    </div>
  </div>
</div>
</pre>

Screenshot of Form using Lightning Design System
 
This was selected as the best answer
feroz mohammed gootyferoz mohammed gooty
Hi Isalew,

               Can you please share the full code of the form you created if possible.

Thanks and regards,
Feroz