We have seen how to display data in 2 column layout in the previous post.
see Display Data in 2 column Layout .
To display data in 3- column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
</div>
</div>
To display data in 4 - column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
</div>
</div>
Example to display data in 3 -column layout :
Note:I was just modifying AccountCreation.cmp component of previous post.
Remaining components will be same.
AccountCreation.cmp
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
<aura:attribute name="newAccount" type="Account"
default="{ 'sobjectType': 'Account'
}"/>
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col">
<p class="slds-text-heading--label">Account</p>
<h1 class="slds-text-heading--medium">My Account</h1>
</div>
</div>
</div>
<!-- / PAGE HEADER -->
<!-- NEW Account FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="Accountform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--large">
<legend id="Accountform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Account
</legend>
<!-- CREATE NEW Account FORM -->
<form class="slds-form--stacked">
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.Name}"
/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLAExpirationDate__c}"
displayDatePicker="true"/>
</div>
</div>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.Name}"
/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLAExpirationDate__c}"
displayDatePicker="true"/>
</div>
</div>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="Site"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__Site}"
/>
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="SIC Description"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SicDesc}"
/>
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLASerialNumber__c}"
/>
</div>
</div>
</div>
</div>
<div class="slds-form-element">
<ui:button label="Create Account"
class="slds-button slds-button--brand"
press="{!c.clickCreateAccount}"/>
</div>
</form>
<!-- / CREATE NEW Account FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW Account -->
</div>
<!-- / NEW Account FORM -->
</aura:component>
Output:
see Display Data in 2 column Layout .
To display data in 3- column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
</div>
</div>
To display data in 4 - column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
</div>
</div>
Example to display data in 3 -column layout :
Note:I was just modifying AccountCreation.cmp component of previous post.
Remaining components will be same.
AccountCreation.cmp
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
<aura:attribute name="newAccount" type="Account"
default="{ 'sobjectType': 'Account'
}"/>
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col">
<p class="slds-text-heading--label">Account</p>
<h1 class="slds-text-heading--medium">My Account</h1>
</div>
</div>
</div>
<!-- / PAGE HEADER -->
<!-- NEW Account FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="Accountform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--large">
<legend id="Accountform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Account
</legend>
<!-- CREATE NEW Account FORM -->
<form class="slds-form--stacked">
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.Name}"
/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLAExpirationDate__c}"
displayDatePicker="true"/>
</div>
</div>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.Name}"
/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLAExpirationDate__c}"
displayDatePicker="true"/>
</div>
</div>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="Site"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__Site}"
/>
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="SIC Description"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SicDesc}"
/>
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newAccount.ksk__SLASerialNumber__c}"
/>
</div>
</div>
</div>
</div>
<div class="slds-form-element">
<ui:button label="Create Account"
class="slds-button slds-button--brand"
press="{!c.clickCreateAccount}"/>
</div>
</form>
<!-- / CREATE NEW Account FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW Account -->
</div>
<!-- / NEW Account FORM -->
</aura:component>
Output:
No comments:
Post a Comment