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

查看示例，查看源碼。