Material Design Lite 的图标

2018-12-19 18:17 更新

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

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

例

下面的例子展示了使用MDL-图标切换类的显示不同类型的复选框作为图标。

mdl_icons.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 Icon</td><td>Off Icon</td><td>Disabled Icon</td></tr>
      <tr><td> 
         <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
            <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
            <i class="mdl-icon-toggle__label material-icons">format_bold</i>
         </label>
	  </td>
      <td>
         <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
            <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
            <i class="mdl-icon-toggle__label material-icons">format_italic</i>
         </label>
	  </td>
       <td>
         <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
            <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" disabled>
            <i class="mdl-icon-toggle__label material-icons">format_underline</i>
         </label>
	   </td>
      </tr>
   </table>   
</body>
</html>

结果

验证结果。

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

← Material Design Lite 单选按钮

Material Design Lite 交换机 →

写笔记

我要补充