The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the buttons. The below table
mentions the available classes and their effects.
mdl_buttons.htm
| S.N. | 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, can be used mutual exclusively with fab, mini-fab, and icon. |
| 5 | mdl-button--fab Sets fab (circular) display effect, can be used mutual exclusively with raised, mini-fab, and icon. |
| 6 | mdl-button--mini-fab Sets mini-fab (small fab circular) display effect,can be used mutual exclusively with raised, fab, and icon. |
| 7 | mdl-button--icon Sets icon (small plain circular) display effect, can be used mutual exclusively 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 classes. |
Example
The following example showcases the use of mdl-button classes to show different types of buttons.mdl_buttons.htm
<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>
No comments:
Post a Comment