0

I trying use SLDS Lightning design system at a checkbox. My checkboxes should look like as button and when I click on it I try change background color. enter image description hereFor example: https://www.lightningdesignsystem.com/components/forms/#flavor-checkbox

I try edit below code: 

<div aura:id="xcont" class="background-silver">
     <ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="line" />
</div>

To something like this 

<span class="slds-button slds-checkbox--button" for="monday">
  <input type="checkbox" name="checkbox" id="monday" />
  <label class="slds-checkbox--button__label" for="monday">
    <span class="slds-checkbox--faux">Mon</span>
  </label>
 </span>

but I don't know how I should void JS function when I click at checkbox.

|improve this question
  • you should try to use toggle button hope this work lightningdesignsystem.com/components/forms/… – Swapnil Udamale Apr 19 '17 at 7:43
  • I do this and edited my question with the answear – JJanek Apr 19 '17 at 7:48
  • Please post the answer as an answer. Not in the question. – Martin Lezer Apr 19 '17 at 8:09
  • Sorry, I'm new at forum and still learning. – JJanek Apr 19 '17 at 9:00
  • Can I change style when I check checkbox? – JJanek Apr 19 '17 at 10:51
1

I do this with below code - maybe someone use this:

<div aura:id="xcont" class="slds-button slds-checkbox--button background-silver">
  <label class="answears slds-checkbox--button__label">
  <ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="line" />
</label>
</div>
|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.