Last active
October 7, 2015 22:30
-
-
Save dancinllama/8126fc1c438205525d6f to your computer and use it in GitHub Desktop.
The checkboxes in the Salesforce Lightning Design System are odd ducks. They require a DOM structure that the Lightning component or aura ui:inputCheckbox tag doesn't support natively, due to the "slds-checkbox--faux" span, etc. Furthermore, the SLDS checkbox uses Ids to control the value between the faux span and the input:checkbox. I'm not sur…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- LDS markup for a checkbox (https://www.lightningdesignsystem.com/components/forms/) --> | |
<div class="slds-form-element margintop10"> | |
<label class="slds-checkbox" for="requiredCheckbox"> | |
<ui:inputCheckbox aura:Id="requiredCheckbox" value="{!v.selectedFormObject.Required_On_Form__c}" /> | |
<span class="slds-checkbox--faux" /> | |
<span class="slds-form-element__label marginleft10">Required on Form?</span> | |
</label> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
//Called from either another helper method or from the aura:initHandler call or an event, etc. | |
doInit : function(component, event, helper) { | |
return helper.fixLDSCheckboxes(component); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
//Method for fixing Lightning Design System Checkboxes | |
fixLDSCheckboxes : function(component){ | |
//Add all the checkboxes here. Note, you'll need their aura Ids | |
this.fixLDSCheckbox(component.find("requiredCheckbox")); | |
this.fixLDSCheckbox(component.find("showLabelCheckbox")); | |
this.fixLDSCheckbox(component.find("showCheckbox")); | |
return false; | |
}, | |
fixLDSCheckbox : function(chkbox){ | |
var el = chkbox.getElement(); | |
var elLabel = el.parentElement; | |
elLabel.setAttribute("for",el.getAttribute("Id")); | |
return false; | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment