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

查看示例，查看源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2049783