免費(fèi)AI編程助手
Material Design Lite 單選按鈕
2018-12-19 18:17 更新
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)適用于擺放各類單選按鈕。下表中提到的可用類和它們的影響。
| SN | 類名稱和說(shuō)明 |
|---|---|
| 1 | MDL-電臺(tái) 標(biāo)簽標(biāo)識(shí)作為MDL組成部分，需要的標(biāo)簽元素。 |
| 2 | MDL-JS-電臺(tái) 設(shè)置基本MDL行為標(biāo)記和需要的標(biāo)簽元素。 |
| 3 | MDL-radio__button 設(shè)置基本MDL行為電臺(tái)和需要輸入元素（單選按鈕）。 |
| 4 | MDL-radio__label 設(shè)置基本MDL行為標(biāo)題和需要span元素（標(biāo)題）上。 |
| 五 | MDL-JS-漣漪效應(yīng) 套波紋點(diǎn)擊effectt是可選的那張標(biāo)簽元素，而不是輸入元素（單選按鈕）。 |
例
下面的例子展示了使用MDL-滑塊類，以顯示不同類型的單選按鈕。
mdl_radio.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<link rel="stylesheet" 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>
結(jié)果
驗(yàn)證結(jié)果。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：