Hello friends today post ,how to create a lightning component to use slds-hide/show class,
very easy to use class and aplly..
so let us start ...
firstly create a lightning component and there are two or three div or anything when you want to hide/show ...
so see given bellow example and udes slds-hide/show class
Step=>1.
goto developer console=>File=>New=>Lightning Component
sldshideshow.cmp
<aura:component >
<aura:attribute name="First" type="string" default="slds-show"/>
<aura:attribute name="Second" type="string" default="slds-hide"/>
<center>
<div class="slds-box" style="width:300px;height:300px;margin-top:15px;">
<div class="{!v.First}">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">First Section</label>
<div class="slds-form-element__control">
<input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input"/>
</div>
</div>
<button class="slds-button slds-button_brand" onclick="{!c.Next}" style="margin-top:10px;">Next</button>
</div>
<div class="{!v.Second}">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Second Section</label>
<div class="slds-form-element__control">
<input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
</div>
</div>
</center>
</aura:component>
Step=>2.
sldshideshowController.js
({
Next : function(component, event, helper) {
component.set("v.First","slds-hide");
component.set("v.Second","slds-show");
}
})
Output:
Thanks!
very easy to use class and aplly..
so let us start ...
firstly create a lightning component and there are two or three div or anything when you want to hide/show ...
so see given bellow example and udes slds-hide/show class
Step=>1.
goto developer console=>File=>New=>Lightning Component
sldshideshow.cmp
<aura:component >
<aura:attribute name="First" type="string" default="slds-show"/>
<aura:attribute name="Second" type="string" default="slds-hide"/>
<center>
<div class="slds-box" style="width:300px;height:300px;margin-top:15px;">
<div class="{!v.First}">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">First Section</label>
<div class="slds-form-element__control">
<input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input"/>
</div>
</div>
<button class="slds-button slds-button_brand" onclick="{!c.Next}" style="margin-top:10px;">Next</button>
</div>
<div class="{!v.Second}">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Second Section</label>
<div class="slds-form-element__control">
<input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
</div>
</div>
</center>
</aura:component>
Step=>2.
sldshideshowController.js
({
Next : function(component, event, helper) {
component.set("v.First","slds-hide");
component.set("v.Second","slds-show");
}
})
Output:
Thanks!
Buy me a coffee
Comments
Post a Comment