Sr.No. | 类名和描述 |
1 |
mdl-button
将按钮设置为 MDL 组件,必需。
|
2 |
mdl-js-button
向按钮添加基本的 MDL 行为,需要。
|
3 |
(none)
设置平面显示效果为按钮,默认。
|
4 |
mdl-button--raised
设置凸起显示效果;这与 fab、mini-fab 和 icon 互斥。
|
5 |
mdl-button--fab
设置fab(圆形)显示效果;这与凸起、小型晶圆厂和图标互斥。
|
6 |
mdl-button--mini-fab
设置mini-fab(小晶圆厂圆形)显示效果;这与凸起、晶圆厂和图标互斥。
|
7 |
mdl-button--icon
设置图标(小素圆形)显示效果;这与凸起、晶圆厂和小型晶圆厂是相互排斥的。
|
8 |
mdl-button--colored
设置彩色显示效果,颜色在 material.min.css 中定义。
|
9 |
mdl-button--primary
设置原色显示效果,颜色在 material.min.css 中定义。
|
10 |
mdl-button--accent
设置强调色显示效果,颜色在 material.min.css 中定义。
|
11 |
mdl-js-ripple-effect
设置波纹点击效果,可以与任何其他类结合使用。
|
<html> <head> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <table border = "0"> <tbody> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Colored fab (circular) display effect</td> <td>Colored fab (circular) with ripple display effect</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Plain fab (circular) display effect</td> <td>Plain fab (circular) with ripple display effect</td> <td>Plain fab (circular) and disabled</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--raised"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Raised button</td> <td>Raised button with ripple display effect</td> <td>Raised button and disabled</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Colored Raised button</td> <td>Accent-colored Raised button</td> <td>Accent-colored raised button with ripple effect</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Flat button</td> <td>Flat button with ripple effect</td> <td>Disabled flat button</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--primary"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--accent"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Primary Flat button</td> <td>Accent-colored Flat button</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--icon"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Icon button</td> <td>Colored Icon button</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Mini Colored fab (circular) display effect</td> <td>Mini Colored fab (circular) with ripple display effect</td> <td> </td> </tr> </tbody> </table> </body> </html>