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

查看示例，查看源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2049673