The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of
checkboxes. The below table mentions the available classes and their
effects.
mdl_checkboxes.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-checkbox Identifies label as an MDL component and is required on label element. |
| 2 | mdl-js-checkbox Sets basic MDL behavior to label and is required on label element. |
| 3 | mdl-checkbox__input Sets basic MDL behavior to checkbox and is required on input element (checkbox). |
| 4 | mdl-checkbox__label Sets basic MDL behavior to caption and is required on span element (caption). |
| 5 | mdl-js-ripple-effect Sets ripple click effectt and is optional goes on label element, not input element (checkbox). |
Example
The following example showcases the use of mdl-slider classes to show different types of check boxes.mdl_checkboxes.htm
<html> <head> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script langauage="javascript"> function showMessage(value){ document.getElementById("message").innerHTML = value; } </script> </head> <body> <table> <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td><td>Disabled CheckBox</td></tr> <tr><td> <label class="mdl-checkbox mdl-js-checkbox" for="checkbox1"> <input type="checkbox" id="checkbox1" class="mdl-checkbox__input" checked> <span class="mdl-checkbox__label">Married</span> </label> </td> <td> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox2"> <input type="checkbox" id="checkbox2" class="mdl-checkbox__input"> <span class="mdl-checkbox__label">Single</span> </label> </td> <td> <label class="mdl-checkbox mdl-js-checkbox" for="checkbox3"> <input type="checkbox" id="checkbox3" class="mdl-checkbox__input" disabled> <span class="mdl-checkbox__label">Don't know (Disabled)</span> </label> </td> </tr> </table> </body> </html>
No comments:
Post a Comment