Material Design Lite - Menus

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher différents types de menu. Le tableau suivant répertorie les classes disponibles et leurs effets

N ° Sr. Nom et description de la classe
1

mdl-button

Identifie le bouton comme un composant MDL et est requis sur l'élément bouton.

2

mdl-js-button

Définit le comportement MDL de base sur bouton et est requis sur l'élément bouton.

3

mdl-button--icon

Définit l'icône sur bouton et est requis sur l'élément bouton.

4

material-icons

Identifie la travée en tant qu'icône de matériau et est requise sur un élément en ligne.

5

mdl-menu

Identifie un conteneur de liste non ordonné en tant que composant MDL et est requis sur l'élément ul.

6

mdl-js-menu

Définit le comportement MDL de base sur le menu et est requis sur l'élément ul.

sept

mdl-menu__item

Identifie les boutons comme options de menu MDL et définit le comportement MDL de base, requis sur les éléments d'élément de liste.

8

mdl-js-ripple-effect

Définit l'effet de clic ondulé sur les liens d'options et est facultatif; requis sur un élément de liste non ordonné.

9

mdl-menu--top-left

Définit la position du menu au-dessus du bouton, aligne le bord gauche du menu avec le bouton et est facultatif; requis sur un élément de liste non ordonné.

dix

(none)

Par défaut, le menu est positionné sous le bouton, s'aligne sur le bord gauche avec le bouton.

11

mdl-menu--top-right

Le menu est positionné au-dessus du bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné.

12

mdl-menu--bottom-right

Le menu est positionné sous le bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes pour montrer les différents types de fileurs.

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>

Résultat

Vérifiez le résultat.