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

查看示例,查看源码

转载于:https://my.oschina.net/u/3647851/blog/2049673

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值