You need to sign in to do that
Don't have an account?
Madhuri Gowda
how to change the color of a lightning card when clicked on it
Hello Everyone
Need Small Help
I am new to the slds, i am trying to display certain lightning cards, my Requirement is when i click on that card it should change the color
can anyone please suggest how can i do that
below is my code and snapshot
<aura:component >
<a class="slds-badge__icon" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_brand" href="javascript:void(0);">3BHK Available</a>
<a class="slds-button slds-button_outline-brand" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_text-destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_success" href="javascript:void(0);">1BHK Blocked</a>
</aura:component>
Need Small Help
I am new to the slds, i am trying to display certain lightning cards, my Requirement is when i click on that card it should change the color
can anyone please suggest how can i do that
below is my code and snapshot
<aura:component >
<a class="slds-badge__icon" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_brand" href="javascript:void(0);">3BHK Available</a>
<a class="slds-button slds-button_outline-brand" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_text-destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_success" href="javascript:void(0);">1BHK Blocked</a>
</aura:component>
I have tried your code in my org. You just need to add a CSS in your component stylesheet.
Please try the following code:
You can change the color as per your requirement.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
All Answers
I have tried your code in my org. You just need to add a CSS in your component stylesheet.
Please try the following code:
You can change the color as per your requirement.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
Thank you very much for the Tip, can i design a Lightning card where it shows as "Available" as Green and when i click on the card again it should show as "Booked" and color should change as per the below snapshot
i have already created a lightning component and app where 5 boxes are displayed,
now my requirement is that whenever i click on one of those buttons, those buttons should turn to green and display a text called booked, the others should be in a green box as Available, i was advised by my seniors to use "Toogle function" to show/hide option, but i could not do it, i would really appreciate if anyone could help with this issue
below are the links which i am trying to implement to my lightning components
link 1 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_text ( for changing the text )
link 2 - https://stackoverflow.com/questions/26937424/change-button-color-onclick (Changing the color when it is clicked on the button)
==========================================
MysldsApp.app -
<aura:application extends="force:slds">
<c:cmpsldsApp />
</aura:application>
==========================================
cmpsldsApp.css -
.THIS.slds-button:focus {
box-shadow: 0 0 3px #0070d2;
background: Red !important;
}
.THIS.slds-button:focus {
box-shadow: 0 0 3px #0000FF;
background: blue !important;
}
==================================================
component -
<aura:component >
<p> Floor No 0 </p>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
<p> Floor No 1 </p>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
<p> Floor No 2 </p>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
<p> Floor No 3 </p>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
</aura:component>
===================================================
controller
({
handleClick : function (cmp, event, helper) {
alert("The Booking Status has been Changed to: " + event.getSource().get("v.label"));
}
});