📜  Material Design Lite-菜单

📅  最后修改于: 2020-10-22 05:54:29             🧑  作者: Mango


MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的菜单。下表列出了可用的类及其效果

Sr.No. Class Name & Description
1

mdl-button

Identifies button as an MDL component and is required on button element.

2

mdl-js-button

Sets basic MDL behavior to button and is required on button element.

3

mdl-button–icon

Sets icon to button and is required on button element.

4

material-icons

Identifies span as a material icon and is required on an inline element.

5

mdl-menu

Identifies an unordered list container as an MDL component and is required on ul element.

6

mdl-js-menu

Sets basic MDL behavior to menu and is required on ul element.

7

mdl-menu__item

Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements.

8

mdl-js-ripple-effect

Sets ripple click effect to option links and is optional; required on unordered list element.

9

mdl-menu–top-left

Sets the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element.

10

(none)

By default, menu is positioned below button, aligns to the left edge with button.

11

mdl-menu–top-right

Menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element.

12

mdl-menu–bottom-right

menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element.

下面的示例将帮助您了解使用mdl-spinner类来显示不同类型的微调器。

mdl_menu.htm


      
            
      
      
   
   
   
      
Lower Left MenuLower Right MenuTop Left Menu Top Right Menu
  • Item #1
  • Item #2
  • Disabled Item
  • Item #1
  • Item #2
  • Disabled Item
  • Item #1
  • Item #2
  • Disabled Item
  • Item #1
  • Item #2
  • Disabled Item

结果

验证结果。