Material Design Lite 交换机

2018-12-19 18:17 更新

该MDL提供多种CSS类各种预先定义的外观和行为增强适用于摆放各类复选框作为开关。下表中提到的可用类和它们的影响。

SN	类名称和说明
1	MDL-开关标签标识作为MDL组成部分，需要的标签元素。
2	MDL-JS-开关设置基本MDL行为标记和需要的标签元素。
3	MDL-switch__input 设置基本MDL行为切换，并且需要输入元素（交换机）上。
4 / TD>	MDL-switch__label 设置基本MDL行为标题和需要在我的元素（标题）上。
五	MDL-JS-涟漪效应套波纹点击效果，是可选的;那张标签元素上，而不是输入元素（开关）。

例

下面的例子展示了使用MDL-开关类，显示不同类型的复选框作为开关。

mdl_switches.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" >	  
</head>
<body>
   <table>
      <tr><td>On Switch</td><td>Off Switch</td><td>Disabled Switch</td></tr>
      <tr><td> 
         <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>           
         </label>
	  </td>
      <td>
         <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
            <input type="checkbox" id="switch-2" class="mdl-switch__input">           
         </label>
	  </td>
       <td>
         <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
            <input type="checkbox" id="switch-2" class="mdl-switch__input" disabled>            
         </label>
	   </td>
      </tr>
   </table>   
</body>
</html>

结果

验证结果。

以上内容是否对您有帮助：

← Material Design Lite 的图标

Material Design Lite 数据表 →

写笔记

我要补充