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 |
将按钮下方的菜单位置对准菜单右边缘 | 可选 |
(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>