MDL提供了一系列CSS类来应用各种预定义的视觉和行为
增强功能并显示不同类型的菜单.下表列出了可用的类及其效果
Sr.No. | Class Name&描述 |
---|---|
1 | mdl-button 将按钮标识为MDL组件,并且在按钮元素上是必需的. |
2 | mdl-js-button 将基本MDL行为设置为按钮,并且在按钮元素上是必需的. |
3 | mdl-button - icon 将图标设置为按钮,并且在按钮元素上是必需的. |
4 | 材料-icons 将范围标识为材料图标,并且在内联元素中是必需的. |
5 | mdl-menu 标识无序的li st容器作为MDL组件,在ul元素上是必需的. |
6 | mdl-js-menu 设置基本MDL行为到菜单,在ul元素上是必需的. |
7 | mdl-menu__item 将按钮标识为MDL菜单选项和集合列表项元素所需的基本MDL行为. |
8 | mdl-js-ripple-effect 设置涟漪点击效果选项链接,是可选的;在无序列表元素上需要. |
9 | mdl-menu - 左上角 设置按钮上方的菜单位置,菜单的左边缘与按钮对齐,是可选的;在无序列表元素上需要. |
10 | (无) 默认情况下,菜单位于按钮下方,与左边有按钮. |
11 | mdl-menu - 右上角 菜单位于按钮上方,对齐带有按钮的右边缘,可选,然后是无序列表元素. |
12 | mdl-menu - bottom-right 菜单位于按钮下方,使用按钮对齐右边缘,可选,然后按无序列表元素. |
以下示例将帮助您了解使用 mdl-spinner 类来显示不同类型的微调器.
<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>
验证结果.