免费 AI IDE
Material Design Lite 单选按钮
2018-12-19 18:17 更新
该MDL提供多种CSS类各种预先定义的外观和行为增强适用于摆放各类单选按钮。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-电台 标签标识作为MDL组成部分，需要的标签元素。 |
| 2 | MDL-JS-电台 设置基本MDL行为标记和需要的标签元素。 |
| 3 | MDL-radio__button 设置基本MDL行为电台和需要输入元素（单选按钮）。 |
| 4 | MDL-radio__label 设置基本MDL行为标题和需要span元素（标题）上。 |
| 五 | MDL-JS-涟漪效应 套波纹点击effectt是可选的那张标签元素，而不是输入元素（单选按钮）。 |
例
下面的例子展示了使用MDL-滑块类，以显示不同类型的单选按钮。
mdl_radio.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://link.w3cschool.cn/?target=https%3A%2F%2Fstorage.googleapis.com%2Fcode.getmdl.io%2F1.0.6%2Fmaterial.indigo-pink.min.css" rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="https://link.w3cschool.cn/?target=https%3A%2F%2Ffonts.googleapis.com%2Ficon%3Ffamily%3DMaterial%2BIcons" rel="external nofollow" target="_blank" >
<script langauage="javascript">
function showMessage(value){
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td><td>Disabled Radio Button</td></tr>
<tr><td>
<label class="mdl-radio mdl-js-radio" for="option1">
<input type="radio" id="option1" name="gender" class="mdl-radio__button" checked>
<span class="mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option2">
<input type="radio" id="option2" name="gender" class="mdl-radio__button" >
<span class="mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class="mdl-radio mdl-js-radio" for="option3">
<input type="radio" id="option3" name="gender" class="mdl-radio__button" disabled>
<span class="mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：