📌  相关文章
📜  材质设计精简版-单选按钮

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

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

Sr.No. Class Name & Description
1

mdl-radio

Identifies label as an MDL component and is required on label element.
2

mdl-js-radio

Sets basic MDL behavior to label and is required on label element.
3

mdl-radio__button

Sets basic MDL behavior to radio and is required on input element (radio button).
4

mdl-radio__label

Sets basic MDL behavior to caption and is required on span element (caption).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (radio button).

例

下面的示例将帮助您理解使用mdl-slider类来显示不同类型的单选按钮。

mdl_radio.htm

现场演示

      
            
      
      
   
   
   
      

         
Default Radio ButtonRadio Button with Ripple Effect
            Disabled Radio Button

结果

验证结果。