AngularDart Material Design 屑

原创
2018/09/09 20:06
阅读数 60

MaterialChipsComponent

Selector: <material-chips>

chips收集小部件,将对象列表显示为屑片。

Inputs:

  • itemRenderer (dynamic) → String 
    将条目呈现为字符串的函数。
    注意:此ItemRenderer仅在SelectionModel也提供时使用。 如果手动渲染屑,则还需要手动在各条目上设置itemRenderer属性。
    关于OnPush的注意事项:如果ItemRenderer不是纯函数并且具有可能以不同方式呈现相同项的内部状态,则引用本身必须更改才能生效。
     
  • removable bool 
    是否可以拆除。
     
  • selectionModel SelectionModel<dynamic> 
    此组件控制的选择模型。
     

MaterialChipComponent

Selector: <material-chip>

chip”小部件呈现“chip”格式的对象 - 带阴影的圆形框,通常用于水平列表。可以使用任何实现HasUIDisplayName接口的对象,或者根本不使用任何对象。

只有在部件(widget)上设置了selectionModel或者removable属性为true时,才会显示删除按钮。当hasLeftIcon为true时,左图标内容应设置为MaterialIconComponent或SVG图像。Chip组件呈现在material-chips组件中。

Inputs:

  • hasLeftIcon bool 
    chip是否应显示自定义图标,默认为false
     
  • itemRenderer (dynamic) → String 
    ItemRenderer函数(接受一个对象并返回一个字符串)。
    如果ItemRenderer不是无状态,并且可能为同一输入项返回不同的值,则ItemRenderer引用需要更新,否则将不会反映该更改。
    提供时,它用于为芯片生成标签。
     
  • removable bool 
    chip是否应显示删除按钮,默认为true
     
  • selectionModel SelectionModel<dynamic> 
    选择模型呈现为chips。此模型不应用于渲染,不会反映更改。
    除非removable设置为false,否则可以通过用户交互从模型中取消选择chips。
  • value dynamic 
    要渲染的数据模型。
    在chip内容中提供您自己的标签,或提供ItemRenderer

Outputs:

  • remove Stream<dynamic> 
    当chip被移除时,事件被触发,返回chip的值。

MaterialChipsDemoComponent

查看示例,查看源码。 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部