Represents a responsive grid system for arranging containers on a page. A lightning:layout is a flexible grid system for arranging containers within a page or inside another container. The default layout is mobile-first and can be easily configured to work on different devices.
Sample Code:
<aura:component implements="flexipage:availableForAllPageTypes" >
<div class="c-container">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputSelect multiple="false">
<ui:inputSelectOption label="All Types" text="" value="true"/>
</ui:inputSelect>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<button class="slds-button slds-button_brand">Search</button>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:button label="New"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Output:
Cheers!!!
Sample Code:
<aura:component implements="flexipage:availableForAllPageTypes" >
<div class="c-container">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputSelect multiple="false">
<ui:inputSelectOption label="All Types" text="" value="true"/>
</ui:inputSelect>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<button class="slds-button slds-button_brand">Search</button>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:button label="New"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Output:
Cheers!!!
No comments:
Post a Comment