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://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" 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>

结果

验证结果。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号