MDL提供了一系列CSS类,可以对按钮应用各种预定义的视觉和行为
增强功能.下表列出了可用的类及其
效果.
Sr.No. | Class Name&描述 |
---|---|
1 | mdl-button 将按钮设置为MDL组件,是必需的. |
2 | mdl-js-button 向按钮添加基本MDL行为,必需. |
3 | (无) 将平面显示效果设置为按钮,默认为. |
4 | mdl-button - raise 设置提升的显示效果;这与fab,mini-fab和icon互斥. |
5 | mdl-button - fab 集fab(圆形)显示效果;这与凸起的迷你工厂和图标是互斥的. |
6 | mdl-button - mini-fab 设置mini-fab(小型圆形)显示效果;这与凸起,制作和图标互斥. |
7 | mdl-button - icon 设置图标(小平圆形)显示效果;这与凸起的,晶圆厂和迷你晶圆厂是互斥的. |
8 | mdl-button - 着色 集彩色显示效果,其中颜色在material.min.css中定义. |
9 | mdl-button - primary 设置主要颜色显示效果,其中颜色在material.min.css中定义. |
10 | mdl-button - accent 设置重音颜色显示效果,其中颜色在material.min.css中定义. |
11 | mdl-js-ripple-effect 设置涟漪点击效果,可与任何其他类组合使用. |
示例
以下示例将帮助您了解使用 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 |