- Material Design Lite 教程
- MDL - 主页
- MDL - 概述
- MDL - 环境设置
- MDL - 布局
- MDL - 网格
- MDL - 选项卡
- MDL - 页脚
- MDL - 徽章
- MDL - 按钮
- MDL - 卡片
- MDL - 进度条
- MDL - 纺纱机
- MDL - 菜单
- MDL - 滑块
- MDL - 复选框
- MDL - 单选按钮
- MDL-图标
- MDL - 开关
- MDL-数据表
- MDL - 文本字段
- MDL - 工具提示
- Material Design Lite 资源
- MDL - 快速指南
- MDL - 有用的资源
- MDL - 讨论
Material Design Lite - 复选框
MDL 提供了一系列 CSS 类来应用各种预定义的视觉和Behave增强功能并显示不同类型的复选框。下表列出了可用的类别及其效果。
先生。 | 类名和描述 |
---|---|
1 | mdl-复选框 将标签标识为 MDL 组件,并且在标签元素上是必需的。 |
2 | mdl-js-复选框 将基本 MDL Behave设置为标签,并且在标签元素上是必需的。 |
3 | mdl-checkbox__input 将基本 MDL Behave设置为复选框,并且在输入元素(复选框)上是必需的。 |
4 | mdl-checkbox__label 将基本 MDL Behave设置为标题,并且在 span 元素(标题)上是必需的。 |
5 | mdl-js-涟漪效应 设置波纹点击效果,可选;出现在标签元素上,而不是输入元素(复选框)上。 |
例子
以下示例将帮助您了解如何使用 mdl-slider 类来显示不同类型的复选框。
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>
结果
验证结果。