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; }