AngularDart Material Design 菜单

原创
2018/09/11 17:47
阅读数 81

 MaterialMenuComponent

Selector: <material-menu>

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-listmaterial-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

查看示例,查看源码

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部