材料设计精简版-图标

📌 相关文章

📜 材料设计精简版-图标

📅 最后修改于: 2020-10-22 05:56:03 🧑 作者: Mango

MDL提供了一系列CSS类，以应用各种预定义的视觉和行为增强功能，并将不同类型的复选框显示为图标。下表列出了可用的类及其效果。

Sr.No.	Class Name & Description
1	mdl-icon-toggle Identifies label as an MDL component and is required on label element.
2	mdl-js-icon-toggle Sets basic MDL behavior to label and is required on label element.
3	mdl-icon-toggle__input Sets basic MDL behavior to icon-toggle and is required on input element (icon-toggle).
4	mdl-icon-toggle__label Sets basic MDL behavior to caption and is required on on i element (icon).
5	mdl-js-ripple-effect Sets ripple click effect and is optional; goes on the label element and not on the input element (icon-toggle).

例

以下示例展示了使用mdl-icon-toggle类将不同类型的复选框显示为图标的情况。

mdl_icons.htm

现场演示


      
            
   
   
   
      
         On Icon Off Icon
            Disabled Icon
         
             
               
                  
                  format_bold
               
            
            
            
               
                  
                  format_italic
               
            
            
            
               
                  
                  format_underline

结果

验证结果。