The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of
checkboxes as switches. The below table mentions the available classes
and their effects.
mdl_switches.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-switch Identifies label as an MDL component and is required on label element. |
| 2 | mdl-js-switch Sets basic MDL behavior to label and is required on label element. |
| 3 | mdl-switch__input Sets basic MDL behavior to switch and is required on input element (switch). |
| 4/td> | mdl-switch__label Sets basic MDL behavior to caption and is required on on i element (caption). |
| 5 | mdl-js-ripple-effect Sets ripple click effect and is optional; goes on label element, not input element (switch). |
Example
The following example showcases the use of mdl-switch classes to show different types of checkboxes as switch.mdl_switches.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"> </head> <body> <table> <tr><td>On Switch</td><td>Off Switch</td><td>Disabled Switch</td></tr> <tr><td> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> <input type="checkbox" id="switch-1" class="mdl-switch__input" checked> </label> </td> <td> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2"> <input type="checkbox" id="switch-2" class="mdl-switch__input"> </label> </td> <td> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2"> <input type="checkbox" id="switch-2" class="mdl-switch__input" disabled> </label> </td> </tr> </table> </body> </html>
No comments:
Post a Comment