📅 最后修改于: 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类来显示不同类型的按钮。
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
验证结果。