AngularDart Material Design 彈出框

MaterialPopupComponent

Selector: <material-popup>

具備材料設計外觀的彈出組件。

注意事項：

• 彈出窗口關閉和打開會自動延遲以添加動畫
• 利用PopupInterface中定義的enforceSpaceConstraints。

若是內容大小太多添加滾動到頁面，這將很是有用。

• 即便此組件支持ChangeDetectionStrategy。對於在示例中測試的案例的OnPush，它沒有設置ChangeDetectionStrategy。這意味着能夠在OnPush模式下在另外一個組件中使用此組件，但因爲任何此類實現都須要全部內容子項支持OnPush，所以由實現者自行決定。
• 若是內容發生變化並須要從新調整位置，請使用在PopupInterface中也定義的trackLayoutChanges。

材質彈出窗口還支持延遲/延遲加載的內容。

該組件將本身發佈爲DropdownHandle，所以其子級能夠經過注入來控制其可見性：

class MyComponent {
  final DropdownHandle _dropdownHandle;

  MyComponent(this._dropdownHandle);

  void onSomethingThatShouldCloseTheDropdown() {
    _dropdownHandle.close();
  }
}

Inputs:

• autoDismiss bool  
  設置彈出窗口是否應在文檔按下時關閉（關閉）自身。
   
• constrainToViewport bool 

  設置是否應將彈出窗口限制爲視口。

  若是這是true，那麼彈出窗口的位置將被限制爲始終位於視口內而不是移出屏幕外。
   

• enforceSpaceConstraints bool 
  設置彈出窗口是否應根據相對於視口的可用空間自動從新定位自身。
   

• hasBox bool
  彈出式面板是否具備包裝內容的封閉框。
  這爲面板提供了陰影和背景顏色。當它關閉時，不會應用延遲動畫。
   

• ink bool 
  將彈出窗口的背景顏色設置爲墨跡（$ mat-gray-700）。
   

• matchMinSourceWidth bool 
  設置彈出窗口是否應將最小寬度設置爲源寬度。
   

• offsetX int 
  將x偏移設置爲彈出窗口最終定位的位置。
   

• offsetY int 
  將y偏移設置爲彈出窗口最終定位的位置。
   

• popupSizeProvider PopupSizeProvider 
  爲彈出窗口大小設置提供程序。
  覆蓋注入的PopupSizeProvider。
   

• preferredPositions Iterable<dynamic> 

  設置在設置enforceSpaceConstraints時應嘗試的位置。

  與Angular提供程序相似，它支持首選位置的嵌套列表。 彈出窗口將展平位置列表並選擇第一個適合屏幕的位置。
   

• slide String 

  彈出縮放的方向。

  有效值爲x，y或null。
   

• source PopupSource 
  設置應相對於彈出窗口建立的源。
   

• trackLayoutChanges bool 
  設置是否應跟蹤源以進行更改。
   

• visible bool 

  設置是否應顯示彈出窗口。

  若是可見不是當前狀態，則能夠關閉或打開彈出窗口。
   

• z int 
  邊界效果的z-elevation。

Outputs:

• autoDismissed Stream<Event> 
  彈出窗口自動關閉時觸發事件的流。
  輸出事件應該是FocusEvent或MouseEvent。
   
• close Stream<void> 
  關閉彈出窗口時觸發異步事件。
   
• open Stream<void> 
  在打開彈出窗口時觸發異步事件。
   
• opened Stream<void> 
  彈出窗口打開後觸發事件的流。
   
• visibleChange Stream<bool> 
  彈出窗口的visible屬性發生更改時觸發的同步事件（例如，從false變爲true或true變爲false）。
  與onOpen和onClose不一樣，這在事件完成後發生。

MaterialPopupExample

查看示例，查看源碼。