For Rendering the component if you are using aura if as below:
<aura:component>
<aura:if isTrue="{!v.attribute1}">
<aura:if isTrue="{!v.attribute2}">
<aura:if Istrue="{!v.attribute3}">
<aura:if Istrue="{!v.attribute4}">
.................
....
..........
<aura:if Istrue="{!v.attributeN}">
</aura:if>
Note: It is not possible is salesforce
========
We can use in <aura:set attribute="else">
<aura:component>
<aura:if isTrue="{!v.attribute1}">item1
<aura:set attribute="else">
<aura:if isTrue="{!v.attribute2}"> item2
<aura:set attribute="else">
<aura:if Istrue="{!v.attribute3}">item3
<aura:set attribute="else">
<aura:if Istrue="{!v.attribute4}">item4
</aura:if>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
</aura:set>
</aura:if>
<aura:component">
THIS WILL WORK
=======================================
You can also use with div tag
<aura:component > | |
<aura:attribute name="displayedSection" type="string" default=""/> | |
<div> | |
<b> This component is going to explain div slds show-hide functionality</b> | |
</div> | |
<lightning:button label="Display Section 1" variant="brand" onclick="{!c.displaySection1}"/> | |
<lightning:button label="Display Section 2" variant="brand" onclick="{!c.displaySection2}"/> | |
<div aura:id="firstsection" class="{!if(v.displayedSection == 'section1','slds-show','slds-hide')}"> | |
<div> | |
<b> First Div Section</b> | |
</div> | |
<lightning:input type="text" label="Section 1 input" name="sec1" value="Inside Section 1" aura:id="sec1value"/> | |
</div> | |
<div aura:id="secondsection" class="{!if(v.displayedSection == 'section2','slds-show','slds-hide')}"> | |
<div> | |
<b> Second Div Section</b> | |
</div> | |
<lightning:input type="text" label="Section 2 input" name="sec1" value="Inside Section 2" aura:id="sec2value"/> | |
</div> | |
</aura:component> |
REF:https://www.sfdcstuff.com/2017/08/auraif-vs-slds-showhide-which-one-to.html
No comments:
Post a Comment