Monday, March 6, 2017

Material Design Lite - Menus

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of menu. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-button
Identifies button as an MDL component and is required on button element.
2mdl-js-button
Sets basic MDL behavior to button and is required on button element.
3mdl-button--icon
Sets icon to button and is required on button element.
4material-icons
Identifies span as a material icon and is required on an inline element.
5mdl-menu
Identifies an unordered list container as an MDL component and is required on ul element.
6mdl-js-menu
Sets basic MDL behavior to menu and is required on ul element.
7mdl-menu__item
Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements.
8mdl-js-ripple-effect
Sets ripple click effect to option links and is optional; required on unordered list element.
9mdl-menu--top-left
Set the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element.
10(none)
By default, menu is positioned below button, aligns to the left edge with button.
11mdl-menu--top-right
menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element.
12mdl-menu--bottom-right
menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element.

Example

The following example showcases the use of mdl-spinner classes to show different types of spinners.
mdl_menu.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">   
   <style>
      .container {
         position: relative;
         width: 200px;
      }
   
      .background {
         background: white;
         height: 148px;
         width: 100%;
      }
   
      .bar {
         box-sizing: border-box;
         background: #BBBBBB;
         color: white;
         width: 100%;
         height: 64px;
         padding: 16px;
      }

      .wrapper {
         box-sizing: border-box;
         position: absolute;
         right: 16px;
      }
</style>
</head>
<body>
   <table>
   <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td><td>Top Right Menu</td></tr>
   <tr>
   <td>
      <div class="container mdl-shadow--2dp">
         <div class="bar">    
            <button id="demo_menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
               <i class="material-icons">more_vert</i>
            </button>
            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
               for="demo_menu-lower-left">
               <li class="mdl-menu__item">Item #1</li>
               <li class="mdl-menu__item">Item #2</li>
               <li disabled class="mdl-menu__item">Disabled Item</li>     
            </ul>        
         </div>
         <div class="background"></div>
      </div>
   </td>
   <td>
      <div class="container mdl-shadow--2dp">
         <div class="bar">
            <div class="wrapper">     
               <button id="demo_menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
                  <i class="material-icons">more_vert</i>
               </button>
               <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                  for="demo_menu-lower-right">
                  <li class="mdl-menu__item">Item #1</li>
                  <li class="mdl-menu__item">Item #2</li>
                  <li disabled class="mdl-menu__item">Disabled Item</li>     
               </ul>
            </div>
         </div>
         <div class="background"></div>
      </div>
   </td>
   <td>
      <div class="container mdl-shadow--2dp">
      <div class="background"></div>
         <div class="bar">    
            <button id="demo_menu-top-left" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
               <i class="material-icons">more_vert</i>
            </button>
            <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
               for="demo_menu-top-left">
               <li class="mdl-menu__item">Item #1</li>
               <li class="mdl-menu__item">Item #2</li>
               <li disabled class="mdl-menu__item">Disabled Item</li>     
            </ul>        
         </div>         
      </div>
   </td>
   <td>     
      <div class="container mdl-shadow--2dp">
      <div class="background"></div>
         <div class="bar">
            <div class="wrapper">     
               <button id="demo_menu-top-right" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
                  <i class="material-icons">more_vert</i>
               </button>
               <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                  for="demo_menu-top-right">
                  <li class="mdl-menu__item">Item #1</li>
                  <li class="mdl-menu__item">Item #2</li>
                  <li disabled class="mdl-menu__item">Disabled Item</li>     
               </ul>
            </div>
         </div>        
      </div>
   </td>
   </tr>
   </table>   
</body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)