AngularDart Material Design 菜单 顶

 MaterialMenuComponent

Selector: <material-menu>

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标可由调用者指定。

单击按钮时菜单会扩展,当选择项目或单击下拉菜单外的区域时,菜单会关闭。

Inputs:

  • ariaLabel String  按钮触发器的Aria标签。
  • buttonText String  触发按钮文本。 如果MenuModel有图标,则忽略。
  • closeMenuOnClick bool  如果为true,则在菜单打开时单击触发按钮将关闭材质菜单。 否则,在菜单已打开时单击触发按钮将不会执行任何操作。
  • disabled bool  菜单是否被禁用。
  • isExpanded bool  菜单是否开放打开。
  • menu MenuModel<dynamic>  显示的菜单。
  • popupClass String  要附加到菜单弹出窗口的CSS类。 这些CSS类将被复制到弹出窗口叠加层中。 当弹出窗口打开时,这些类可用于在叠加层中选择DOM元素。
  • preferredPositions Iterable<dynamic>  传递给材质弹出组件的首选位置。 有关此参数的含义,请参见PopupInterface文档。
  • width dynamic  菜单宽度。

Outputs:

  • isExpandedChange Stream<bool>  扩展菜单时输出事件。
  • focus Stream<FocusEvent>  元素聚焦时的事件。 
  • trigger Stream<void>  触发菜单按钮时输出事件。

MaterialFabMenuComponent

Selector: <material-fab-menu>

带有可选子菜单的fab菜单项。

Inputs:

  • menuItem MenuItem<dynamic>  MenuItem,用于定义此菜单的外观和行为。 如果项目具有没有空项目组的子菜单,则会通过单击或悬停显示菜单。
  • naviId String  内部使用的ID。
  • preferredPopupPositions List<RelativePosition>  菜单弹出窗口的弹出位置显示在。
  • trackLayoutChanges bool 设置建议列表是否随输入框滚动。 这是一个传递属性,如PopupInterface中所定义。
  • viewModel MaterialFabMenuModel  设置此组件的视图模型。

Outputs:

  • onShow Stream<void> fab打开时发出通知。

MaterialMenuDemoComponent

MaterialFabMenuDemoComponent

查看示例,查看源码

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吾爱乐享

php学习之css选择器(二)

1965
来自专栏用户画像

一个简单的卡动车排队系统

702
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

2017
来自专栏自动化测试实战

HTML第三课——css盒子【2】

29614
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

1.1K9
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1913
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1471
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2675
来自专栏十月梦想

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

882
来自专栏coding

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

1083

扫码关注云+社区

领取腾讯云代金券