In this article we are going to see a simple FAN switch on/off example. Concept used here are:
1) Parent to child communication using Aura Method
2) Using Static Resource in lightning component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global"> <aura:method name="imageMethod" action="{!c.doAction}" > <aura:attribute name="imageinfo" type="Boolean" default="false"/> </aura:method> <aura:attribute name="fantype" type="Boolean" default="false"/> <div class="slds-align_absolute-center"> <aura:if isTrue="{!v.fantype}"> <img style="border: 8px solid black;" src="{!$Resource.FanOn}"/> <aura:set attribute="else"> <img src="{!$Resource.FanOff}"/> </aura:set> </aura:if> </div> </aura:component>
({ doAction : function(component, event, helper) { var params = event.getParam('arguments'); if (params) { var param1 = params.imageinfo; component.set("v.fantype",param1); } } })
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <div class="slds-align_absolute-center"> <button class="buttonclass1" onclick="{!c.FanOn}">ON</button> <c:childFan aura:id="childFan"></c:childFan> <button class="buttonclass2" onclick="{!c.FanOff}">OFF</button> </div> </aura:component>
({ FanOn : function(component, event, helper) { var childFanComp = component.find('childFan'); childFanComp.imageMethod("true"); }, FanOff : function(component, event, helper) { var childFanComp = component.find('childFan'); childFanComp.imageMethod("false"); } })
No comments:
Post a Comment