Material Design Lite - Menüs

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und verschiedene Menütypen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt

Sr.Nr. Klassenname & Beschreibung
1

mdl-button

Identifiziert die Schaltfläche als MDL-Komponente und ist für das Schaltflächenelement erforderlich.

2

mdl-js-button

Setzt das grundlegende MDL-Verhalten auf button und ist für das button-Element erforderlich.

3

mdl-button--icon

Setzt das Symbol auf die Schaltfläche und ist für das Schaltflächenelement erforderlich.

4

material-icons

Identifiziert span als Material-Symbol und ist für ein Inline-Element erforderlich.

5

mdl-menu

Identifiziert einen ungeordneten Listencontainer als MDL-Komponente und ist für das ul-Element erforderlich.

6

mdl-js-menu

Setzt das grundlegende MDL-Verhalten auf Menü und ist für das ul-Element erforderlich.

7

mdl-menu__item

Identifiziert Schaltflächen als MDL-Menüoptionen und legt das grundlegende MDL-Verhalten fest, das für Listenelementelemente erforderlich ist.

8

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt auf Optionslinks fest und ist optional. erforderlich für ungeordnetes Listenelement.

9

mdl-menu--top-left

Legt die Menüposition über der Schaltfläche fest, richtet den linken Rand des Menüs an der Schaltfläche aus und ist optional. erforderlich für ungeordnetes Listenelement.

10

(none)

Standardmäßig befindet sich das Menü unter der Schaltfläche und wird mit der Schaltfläche am linken Rand ausgerichtet.

11

mdl-menu--top-right

Das Menü befindet sich über der Schaltfläche, wird mit der Schaltfläche am rechten Rand ausgerichtet, optional und geht auf ein ungeordnetes Listenelement über.

12

mdl-menu--bottom-right

Das Menü befindet sich unter der Schaltfläche, wird mit der Schaltfläche am rechten Rand ausgerichtet, optional und geht auf ein ungeordnetes Listenelement über.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-spinner Klassen, um die verschiedenen Arten von Spinnern zu zeigen.

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>

Ergebnis

Überprüfen Sie das Ergebnis.