📜  材质设计精简版-按钮

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


MDL提供了一系列CSS类,可以对按钮应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。

Sr.No. Class Name & Description
1

mdl-button

Sets button as an MDL component, required.

2

mdl-js-button

Adds basic MDL behavior to button, required.

3

(none)

Sets flat display effect to button, default.

4

mdl-button–raised

Sets raised display effect; this is mutually exclusive with fab, mini-fab, and icon.

5

mdl-button–fab

Sets fab (circular) display effect; this is mutually exclusive with raised, mini-fab, and icon.

6

mdl-button–mini-fab

Sets mini-fab (small fab circular) display effect; this is mutually exclusive with raised, fab, and icon.

7

mdl-button–icon

Sets icon (small plain circular) display effect; this is mutually exclusive with raised, fab, and mini-fab.

8

mdl-button–colored

Sets colored display effect where the colors are defined in material.min.css.

9

mdl-button–primary

Sets primary color display effect where the colors are defined in material.min.css.

10

mdl-button–accent

Sets accent color display effect where the colors are defined in material.min.css.

11

mdl-js-ripple-effect

Sets ripple click effect, can be used in combination with any other class.

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

mdl_buttons.htm


      
            
   
   
   
      
 
Colored fab (circular) display effect Colored fab (circular) with ripple display effect  
Plain fab (circular) display effect Plain fab (circular) with ripple display effect Plain fab (circular) and disabled
Raised button Raised button with ripple display effect Raised button and disabled
Colored Raised button Accent-colored Raised button Accent-colored raised button with ripple effect
Flat button Flat button with ripple effect Disabled flat button
 
Primary Flat button Accent-colored Flat button  
 
Icon button Colored Icon button  
 
Mini Colored fab (circular) display effect Mini Colored fab (circular) with ripple display effect  

结果

验证结果。