AngularDart Material Design 下拉列表

MaterialDropdownSelectComponent

Selector: <material-dropdown-select>git

Material Dropdown Select是按钮触发的下拉列表。github

material-dropdown-select组件结合了material-select和material-button-down的API。异步

当与单个选择模型一块儿使用时,下拉选择时关闭。 使用多选模型时,用户必须经过单击其外部来关闭下拉列表。ide

能够经过传递material-select-item元素手动声明选择选项。 使用声明性API时,不会注入SelectionModel和SelectionOptions,所以将项目标记为选中不是自动的。函数

若是OptionGroup为空而且已定义emptyLabel,则下拉列表将包含其余组。 若是没有为空组定义emptyLabel,它将不会出如今列表中。spa

经过SelectionOptions实现的ObserveAware接口支持异步建议。component

材料选择具备固定的最大高度和自动溢出。 一旦有用例,咱们能够为自定义最大高度添加属性。对象

请参阅示例以了解用法接口

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

查看示例,查看源码

相关文章
相关标签/搜索