Material Design Lite - Menu

MDL cung cấp một loạt các lớp CSS để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước và hiển thị các loại menu khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng

Sr.No. Tên & Mô tả Lớp học
1

mdl-button

Xác định nút là một thành phần MDL và được yêu cầu trên phần tử nút.

2

mdl-js-button

Đặt hành vi MDL cơ bản cho nút và được yêu cầu trên phần tử nút.

3

mdl-button--icon

Đặt biểu tượng thành nút và được yêu cầu trên phần tử nút.

4

material-icons

Xác định span là một biểu tượng vật liệu và được yêu cầu trên một phần tử nội tuyến.

5

mdl-menu

Xác định vùng chứa danh sách không có thứ tự như một thành phần MDL và được yêu cầu trên phần tử ul.

6

mdl-js-menu

Đặt hành vi MDL cơ bản cho menu và được yêu cầu trên phần tử ul.

7

mdl-menu__item

Xác định các nút dưới dạng tùy chọn menu MDL và đặt hành vi MDL cơ bản, được yêu cầu trên các phần tử mục danh sách.

số 8

mdl-js-ripple-effect

Đặt hiệu ứng nhấp chuột gợn sóng cho các liên kết tùy chọn và là tùy chọn; yêu cầu trên phần tử danh sách không có thứ tự.

9

mdl-menu--top-left

Đặt vị trí menu phía trên nút, căn lề trái của menu bằng nút và là tùy chọn; yêu cầu trên phần tử danh sách không có thứ tự.

10

(none)

Theo mặc định, menu được đặt bên dưới nút, căn chỉnh với cạnh trái bằng nút.

11

mdl-menu--top-right

Menu được đặt ở vị trí phía trên nút, căn chỉnh sang cạnh bên phải bằng nút, tùy chọn và nằm trên phần tử danh sách không có thứ tự.

12

mdl-menu--bottom-right

trình đơn được đặt bên dưới nút, căn chỉnh sang cạnh bên phải bằng nút, tùy chọn và đi vào phần tử danh sách không có thứ tự.

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-spinner các lớp để hiển thị các loại spinners khác nhau.

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>

Kết quả

Xác minh kết quả.