Material Design Lite组件之菜单

1.介绍

Material Design Lite（MDL）菜单组件是一个用户界面元素，允许用户从多个选项中选择一个。 选择通常会导致动作启动，设置更改或其他可观察的效果。 菜单选项总是以两个或更多的集合呈现，并且可以根据需要以编程方式启用或禁用选项。 当用户被要求在一系列选项中进行选择时会出现菜单，并且通常在做出选择后被收回。

菜单是用户界面中已建立但非标准化的功能，并允许用户进行选择以指导软件的活动，进度或特性。 他们的设计和使用是整体用户体验的重要因素。

2.配置选项

类名	效果	其他
mdl-button	定义一个按钮为MDL组件	使用button必需
mdl-js-button	为button按钮添加默认事件	使用button必需
mdl-button--icon	为button添加icon展示效果	使用button必需
material-icons	设置行内标签为icon图标	使用icon必需
mdl-menu	定义一个无序列表作为MDL菜单组件	使用ul必需
mdl-js-menu	将默认行为效果添加到菜单	使用ul必需
mdl-menu__item	设置菜单栏目和添加默认行为效果	列表元素必需
mdl-menu__item--full-bleed-divider	设置列表中需要单独设置的特殊样式	列表元素可选样式
mdl-js-ripple-effect	菜单链接添加点击波纹效果	可选
mdl-menu--top-left	将菜单置于按钮上方，将菜单的左边缘与按钮对齐	可选
(none)	将菜单置于按钮下方，将菜单的左边缘与按钮对齐	默认
mdl-menu--top-right	将按钮上方的菜单位置对准菜单右边缘	可选
mdl-menu--bottom-right	将按钮下方的菜单位置对准菜单右边缘	可选

（1）此处使用“more-vert”图标类作为示例。 其他图标可以通过修改类名来使用。 有关可用图标的列表，请参阅 此页面; 将鼠标悬停在图标上可查看其类名。

（2）“button”元素中的i或span元素可以互换使用。

注意：提供了菜单选项的禁用功能，并且使用标准HTML布尔属性禁用或数据mdl禁用来调用。 

<li class =“mdl-menu__item”disabled> Medium </ li>

可以通过脚本编程添加或删除此属性；

菜单需要一个非静态的父元素。 如果菜单位于静态定位节点内，定位选项可能无法正常工作。

3.应用举例

3.1.菜单出现在下方左侧与按钮对齐

<!-- Left aligned menu below button -->
<button id="demo-menu-lower-left"
        class="mdl-button mdl-js-button mdl-button--icon">
  <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">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

3.2.菜单出现在上方右侧与按钮对齐

<!-- Right aligned menu on top of button  -->
<button id="demo-menu-top-right"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
    data-mdl-for="demo-menu-top-right">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>