AngularDart Material Design 屑 顶

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

查看示例，查看源码。 

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }