閱讀(1.9k) 書簽贊(0) 我要糾錯

Material Design Lite 菜單

2018-12-19 18:17 更新

該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強適用于擺放各類菜單。下表中提到的可用類和它們的影響。

SN	類名稱和說明
1	MDL-按鈕標識按鈕作為MDL成分，是必需的按鈕元素。
2	MDL-JS-按鈕設(shè)置基本MDL行為按鈕，要求按鈕元素。
3	MDL-按鈕-圖標設(shè)置圖標，按鈕，要求按鈕元素。
4	材料圖標跨度標識作為材料圖標，需要一個內(nèi)聯(lián)元素上。
五	MDL-菜單標識無序列表容器作為MDL組成部分，需要ul元素上。
6	MDL-JS-菜單設(shè)置基本MDL行為菜單，需要ul元素上。
7	MDL-menu__item 標識按鈕為MDL菜單選項，并設(shè)置基本的MDL行為，在列表項元素必需的。
8	MDL-JS-漣漪效應(yīng) 設(shè)置紋波點擊選項鏈接效果可選;無序列表元素必需的。
9	MDL-菜單-左上角上面的設(shè)置按鈕，菜單位置，校準菜單的左邊緣與按鈕是可選的;無序列表元素必需的。
10	（沒有）缺省情況下，菜單是位于下方按鈕，對準與按鈕的左邊緣。
11	MDL-菜單-右上菜單上方按鈕，對齊與按鈕，可選擇右側(cè)邊緣，進入無序列表元素。
12	MDL-菜單-右下菜單位于下面的按鈕，對齊與按鈕，可選擇右側(cè)邊緣，進入無序列表元素。

例

下面的例子展示了使用MDL-微調(diào)類顯示不同類型的紡紗。

mdl_menu.htm

<html>
<head>
   <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
   <link rel="stylesheet"  rel="external nofollow" target="_blank" >
   <link rel="stylesheet"  rel="external nofollow" target="_blank" >	  
   <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>

結(jié)果

驗證結(jié)果。

以上內(nèi)容是否對您有幫助：

← Material Design Lite 紗廠

Material Design Lite 滑塊 →

寫筆記

我要補充