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