AngularDart Material Design 下拉列表

MaterialDropdownSelectComponent

Selector: <material-dropdown-select>

Material Dropdown Select是按鈕觸發的下拉列表。

material-dropdown-select組件結合了material-select和material-button-down的API。

當與單個選擇模型一塊兒使用時，下拉選擇時關閉。 使用多選模型時，用戶必須經過單擊其外部來關閉下拉列表。

能夠經過傳遞material-select-item元素手動聲明選擇選項。 使用聲明性API時，不會注入SelectionModel和SelectionOptions，所以將項目標記爲選中不是自動的。

若是OptionGroup爲空而且已定義emptyLabel，則下拉列表將包含其餘組。 若是沒有爲空組定義emptyLabel，它將不會出如今列表中。

經過SelectionOptions實現的ObserveAware接口支持異步建議。

材料選擇具備固定的最大高度和自動溢出。 一旦有用例，咱們能夠爲自定義最大高度添加屬性。

請參閱示例以瞭解用法

Attributes:

• buttonAriaRole - 按鈕圖標的Aria標籤。
• popupClass - 要添加到下拉列表彈出窗口的樣式類，以即可以以封裝方式設置彈出窗口的樣式。 有關文檔，請參閱MaterialPopup。

Inputs:

• ariaActiveDescendant String 
  下拉列表的活動元素的id。
   
• buttonAriaLabel String 
  按鈕的詠歎調標籤。
   
• buttonAriaLabelledBy String 
  在下拉按鈕中描述選擇的元素的id。
  例如，對於帶有數字選項的下拉列表，顯示「每頁結果」的文本元素。
   
• buttonText String 
  按鈕上的文字。
   
• componentRenderer (dynamic) → Type 
  使用factoryRenderer它容許更多樹可動做的代碼。
   
• constrainToViewport bool 
  是否限制下拉位置，使其永遠不會脫離屏幕。
   
• deselectLabel String 
  選擇項目的文本標籤，取消選擇當前選擇項。
   
• deselectOnActivate bool 
  是否在單擊或enter/space鍵上取消選擇所選選項。僅限單一選擇模型。默認爲true。
   
• disabled bool 
  是否禁用該按鈕。
   
• enforceSpaceConstraints bool 
  避免渲染下拉屏幕。
   
• error String 
  下拉按鈕下方顯示錯誤。
   
• factoryRenderer (dynamic) → ComponentFactory<dynamic> 
  返回組件工廠以呈現Item的函數。
  生成的組件必須實現RendersValue。
   
• icon Icon 
  與按鈕一塊兒使用的圖標。 （可選的）
   
• iconName String 
  用於按鈕的圖標。有關可能的值，請參見MaterialIconComponent。
   
• itemRenderer (dynamic) → String 
  將選項對象轉換爲字符串的函數。
   
• labelFactory (dynamic) → ComponentFactory<dynamic> 
  返回要用於渲染組標籤的組件的工廠。
   
• labelRenderer (dynamic) → Type 
  已禁用！使用labelFactory而不是它容許更好的樹可抖動代碼。
   
• listAutoFocus bool 
  彈出窗口打開時是否默認聚焦選項列表。
  當彈出窗口中的另外一個元素專一於打開時，應設置爲false，例如一個搜索框。
   
• options SelectionOptions<dynamic> 
  用於此選擇模型的選項。
   
• popupMatchInputWidth bool 
  彈出寬度是否至少與選擇寬度同樣寬。
   
• preferredPositions List<dynamic> 
  當enforceSpaceConstraints爲true時，對齊的首選位置
   
• raised bool 
  按鈕是否凸起。
   
• selection SelectionModel<dynamic> 
  此組件控制的選擇模型。
   
• showButtonBorder bool 
  是否顯示下拉按鈕的下邊框。
   
• slide String 
  彈出縮放的方向。
  有效值爲x，y或null。
   
• trackLayoutChanges bool 

  設置建議列表是否隨輸入框滾動。

  這是一個傳遞屬性，如PopupInterface中所定義。
   

• visible bool 
  下拉列表是否可見。
   

• width dynamic 
  下拉列表的寬度，默認爲無，有效值爲0-5。

Outputs:

• blur Stream<FocusEvent> 
  下拉按鈕失去焦點時觸發的事件。
   
• focus Stream<FocusEvent> 
  下拉按鈕聚焦時觸發的事件。
   
• visibleChange Stream<bool> 
  當下拉列表的可見性發生變化時觸發。

MaterialDropdownSelectDemoComponent

查看示例，查看源碼。