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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

Vue入门---常用指令详解

Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已...

12510
来自专栏hightopo

原 基于HTML5 Canvas 点击添加

16240
来自专栏互联网杂技

jQuery 升级踩坑大全

背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当,可能会有DOMXSS漏洞,非...

61680
来自专栏HT

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中...

28080
来自专栏柠檬先生

移动设备HTML5页面布局

在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section...

43680
来自专栏向治洪

React Native在Android平台运行gif的解决方法

概述 目前RN在Android平台上不支持gif格式的图片,而在ios平台是支持的,期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎...

25660
来自专栏Vamei实验室

被解放的姜戈05 黑面管家

Django提供一个管理数据库的app,即django.contrib.admin。这是Django最方便的功能之一。通过该app,我们可以直接经由web页面,...

22090
来自专栏阮一峰的网络日志

CSS动画简介

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 ? 本文介绍CSS动画的两大组成部分:trans...

37480
来自专栏偏前端工程师的驿站

HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

一、前言                               本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML...

276100
来自专栏非著名程序员

基础篇章:关于 React Native 的props,state,style的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) React Native看起来很像React...

184100

扫码关注云+社区

领取腾讯云代金券