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

查看示例，查看源码。

来源：oschina

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