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