Sr.No. | 类名和描述 |
1 |
mdl-icon-toggle
将标签标识为 MDL 组件并且在标签元素上是必需的。
|
2 |
mdl-js-icon-toggle
将基本 MDL 行为设置为标签,并且在标签元素上是必需的。
|
3 |
mdl-icon-toggle__input
将基本 MDL 行为设置为 icon-toggle,并且在输入元素 (icon-toggle) 上是必需的。
|
4 |
mdl-icon-toggle__label
将基本 MDL 行为设置为标题,并且在 i 元素(图标)上是必需的。
|
5 |
mdl-js-ripple-effect
设置波纹点击效果,可选;在标签元素上而不是在输入元素上(图标切换)。
|
<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>