AngularDart Material Design 列表 顶

MaterialListComponent

Selector: <material-list>

材料列表是用户要与之交互的一组项目的容器组件。

它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。

Attributes:

  • size:string {x-small,small,medium,large,x-large}列表的大小,导致宽度分别为64px * {1.5,3,5,6,7}。 默认大小为“auto”,它将列表的大小调整为其内容。
  • min-size:string {x-small,small,medium,large,x-large}列表的最小尺寸,导致宽度至少为指定的宽度。

Inputs:

  • size String  预设宽度,1到5. 默认情况下,材质列表将扩展到其父级的整个宽度。 注意:规范清楚地列出了预定义的列表大小,因此请谨慎使用默认的扩展大小。 每个宽度将基本块宽度(桌面和平板电脑上的64px)分别乘以1.5,3,5,6,7,以获得可预测的宽度。 设置为0可使列表扩展到其父级的全宽。
  • width dynamic 已禁用!改用siaze输入。

MaterialListItemComponent

Selector: <material-list-item>

Material List Item是一个用于用户交互的块元素; 它具有:hover样式和当用户点击或按下enter或space键时并发出和触发事件。

有关项目分组和标签,请参阅MaterialListComponent。

注意:如果material-list-item在其祖先中具有DropdownHandle,则如果closeOnActivate为true,则在触发(即单击或按下Enter / space on)列表项时将关闭该下拉列表。

Inputs:

  • closeOnActivate bool  是否应该在选择此项目时关闭包含下拉列表。
  • disabled bool 禁用触发器并为项目提供禁用的样式。
  • role String  该组件的作用用于a11y。
  • tabbable bool 组件是否可以列表化。
  • tabindex String  组件的选项卡索引。 如果tabbable为true且disabled为false,则使用该值。

Outputs:

  • trigger Stream<UIEvent> 通过单击,点击或按键激活按钮时触发。

MaterialListDemoComponent

查看示例,查看源码

(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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

H5一二事 - 要饭的

先回顾一下WEB技术的几个阶段 那么H5肯定不是多了一些标签就完事了,H5也跟酷炫没什么关系,那是CSS3的事情,它更多的职责是功能,而不是外观,是JavaSc...

3098
来自专栏欧阳大哥的轮子

iOS的一种基于服务器下发的动态布局方案(一)

栅格布局MyGridLayout是MyLayout布局体系里面的第八种布局。这是一种将布局约束设置和视图分离的布局方式,就像HTML中的标签元素和css样式可以...

2543
来自专栏何俊林

视频画中画效果,拖动进度条可以seek到相应视频帧显示

在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面。

1011
来自专栏更流畅、简洁的软件开发方式

分享一个基于jQuery的锁定表格行列的js脚本。

  网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用...

3026
来自专栏编程

如何提升Web页面的性能,HTML和css代码优化!

怎么进步Web页面的功用,许多开发人员从多个方面来下手如JavaScript、图画优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

3695
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

4276
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

2429
来自专栏james大数据架构

FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件...

20410
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

3088
来自专栏达摩兵的技术空间

h5标签入门

1131

扫码关注云+社区

领取腾讯云代金券