Monday, March 6, 2017

Material Design Lite - Icons

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.

S.N.Class Name & Description
1mdl-icon-toggle
Identifies label as an MDL component and is required on label element.
2mdl-js-icon-toggle
Sets basic MDL behavior to label and is required on label element.
3mdl-icon-toggle__input
Sets basic MDL behavior to icon-toggle and is required on input element (icon-toggle).
4mdl-icon-toggle__label
Sets basic MDL behavior to caption and is required on on i element (icon).
5mdl-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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)