Monday, March 6, 2017

Material Design Lite - Buttons

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.

S.N.Class Name & Description
1mdl-button
Sets button as an MDL component, required.
2mdl-js-button
Adds basic MDL behavior to button, required.
3(none)
Sets flat display effect to button, default.
4mdl-button--raised
Sets raised display effect, can be used mutual exclusively with fab, mini-fab, and icon.
5mdl-button--fab
Sets fab (circular) display effect, can be used mutual exclusively with raised, mini-fab, and icon.
6mdl-button--mini-fab
Sets mini-fab (small fab circular) display effect,can be used mutual exclusively with raised, fab, and icon.
7mdl-button--icon
Sets icon (small plain circular) display effect, can be used mutual exclusively with raised, fab, and mini-fab.
8mdl-button--colored
Sets colored display effect where the colors are defined in material.min.css.
9mdl-button--primary
Sets primary color display effect where the colors are defined in material.min.css.
10mdl-button--accent
Sets accent color display effect where the colors are defined in material.min.css.
11mdl-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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)