AngularDart Material Design 選擇

MaterialSelectComponent

Selector: <material-select>

材料選擇是用於從集合中選擇項目的容器，使用複選圖標標記所選選項。

能夠手動（在模板中）或經過SelectionOptions實例指定選項。 能夠經過模板或經過檢查選擇模型將選項標記爲已選擇。

Inputs:

• componentRenderer (dynamic) → Type
  已禁用！使用factoryRenderer而不是樹可更改樹
   
• disabled bool 

  是否應將選擇顯示爲已禁用。

  默認爲false。
   

• factoryRenderer (dynamic) → ComponentFactory<dynamic> 
  用於建立必須覆蓋給定選項的RendersValue的ComponentFactory，以容許更具表現力的選項。
   

• itemRenderer (dynamic) → String 
   一個渲染函數，用於將選擇選項呈現給String（若是給定值）。
   
• options SelectionOptions<dynamic> 
  SelectionOptions實例提供渲染選項。
   
• selection SelectionModel<dynamic> 
  此容器的SelectionModel。
   
• width dynamic 
  渲染列表的寬度，從1到5。

MaterialSelectItemComponent

Selector: <material-select-item>

材料選擇項是一種特殊的列表項，能夠選擇。

對於可訪問性，應該包含在具備role =「listbox」和aria-multiselectable的元素中，除非將role設置爲「option」之外的其餘內容。

Inputs:

• closeOnActivate bool 

  是否在激活時關閉下拉列表。

  默認爲True。
   

• componentRenderer (dynamic) → Type
  已禁用！請使用factoryrenderer，由於它會產生更多樹形可動代碼。
   

• deselectOnActivate bool 
  若是爲true且selectOnActivate爲true，則觸發此項目組件將取消選擇當前選定的值;若是爲false，則在選擇值時觸發此組件將不執行任何操做。
   

• disabled bool 
  組件是否已禁用。
   

• factoryRenderer (dynamic) → ComponentFactory<dynamic> 
  返回用於動態組件加載器的ComponentFactory，以用於呈現項目。
   

• hideCheckbox bool 

  是否隱藏複選框。

  默認爲False。
   

• isHidden bool 

  是否應隱藏該項目。

  默認爲False。
   

• itemRenderer (dynamic) → String 

  將項目呈現爲String的函數。

  若是未提供，則不生成標籤（標籤仍可做爲內容傳遞）。
   

• role String 

  該組件的做用用於a11y。
   

• selectOnActivate bool 
  若是爲true，則觸發此項目組件將選擇選擇內的值; 若是爲false，則觸發此項目組件將不執行任何操做。
   

• selected bool 
  手動標記所選項目。
   

• selection SelectionModel<dynamic> 
  選擇模型以隨更改一塊兒更新。
   

• tabbable bool 
  組件是否能夠列表化。
   

• tabindex String 

  組件的選項卡索引。

  若是tabbable爲true且disabled爲false，則使用該值。
   

• useCheckMarks bool 

  若是爲true，則使用複選標記而不是複選框來指示是否爲多選項目選擇了該項目。

  此特定樣式用於多選菜單項組的材料菜單下拉列表。
   

• value dynamic 

  此選擇項表示的值。

  若是對象實現HasUIDisplayName，則它將呈現使用uiDisplayName字段做爲項的標籤。 不然，若是提供了ItemRenderer（經過itemRenderer屬性），則僅由此組件生成標籤。

Outputs:

• trigger Stream<UIEvent> 
  經過單擊，點擊或按鍵激活按鈕時觸發。

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> 
  當下拉列表的可見性發生變化時觸發。

DropdownButtonComponent

Selector: <dropdown-button>

一個專門用於下拉菜單的按鈕。

默認狀況下，此按鈕呈現爲帶有三角形圖標和下劃線。 組件自己沒有彈出窗口，但可用於構建未提供的下拉列表。 對具備相同按鈕樣式的組件使用material-dropdown-select，並實現下拉列表自己。

Inputs:

• ariaActiveDescendant String 
  下拉列表的活動元素的id。
   
• ariaExpanded bool 
  若是下拉列表已展開，則爲True。
   
• ariaLabelledBy String 

  另外描述按鈕的元素的id。

  例如，對於帶有數字選項的下拉列表，顯示「每頁結果」的文本元素。
   

• ariaOwns String 
  下拉列表內容的ID。
   

• buttonAriaLabel String 
  按鈕的詠歎調標籤。
   

• buttonText String 
  按鈕上的文字。
   

• disabled bool 
  是否禁用該按鈕。
   

• error String 

  按鈕下方顯示錯誤。

  設置此按鈕時，該按鈕也會顯示紅色下劃線。
   

• icon Icon 
  與按鈕一塊兒使用的圖標。 （可選的）
   

• iconName String 
  用於按鈕的圖標。
  有關可能的值，請參見MaterialIconComponent。
   

• popupType String 
  aria-haspopup的值。
  有關有效值，請參閱https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup。
   

• raised bool 
  按鈕是否凸起。
   

• role String 
  下拉按鈕的ARIA角色。
   

• showButtonBorder bool 
  是否顯示下拉按鈕的下邊框。

Outputs:

• blur Stream<FocusEvent> 
  下拉按鈕失去焦點時觸發的事件。
   
• focus Stream<FocusEvent> 
  元素聚焦時的事件。
   
• trigger Stream<UIEvent> 
  單擊按鈕或激活鍵盤時觸發事件。

displayNameRendererDirective

Selector: <[displayNameRenderer]>

將此僞指令添加到任何SelectionContainer或SelectionItem組件以呈現HasUIDisplayName對象。

查看源碼。

MaterialSelectDemoComponent

MaterialDropdownSelectDemoComponent

查看示例，查看源碼。