mat-grid-list
是一个二维列表,用于把一些单元格按基于网格的布局排列。
参见这里的 Material Design 规范。
mat-grid-list
必须指定一个 cols
属性,用来设置网格的列数。
行数将会根据列数和条目总数自动确定。
网格列表中的行高可以通过 rowHeight
属性来设置。列表的行高会用三种方式计算得出:
固定行高:高度可以为 px
、em
或 rem
。如果没有指定单位,则默认为 px
(比如 100px
、5em
、250
)。
宽高比:该比例表示 "列宽:行高",并须用冒号形式表示(比如 4:3
),不能用数字。
填充:把 rowHeight
设置为 fit
。该模式将会自动根据行数对有效高度进行分割。请注意,必须设置网格列表的高度或其容器的高度。
如果没有指定 rowHeight
,则默认为宽高比是 1:1
。
装订尺寸可以使用 gutterSize
属性来设置为任意 px
、em
或 rem
值。
如果没有指定单位,则默认为 px
。默认的装订尺寸是 1px
。
使用 rowspan
和 colspan
可以为每个 mat-grid-tile
单独设置行合并数或列合并数。如果没设置过,它们默认为 1
。
colspan
不能超过 mat-grid-list
中的 cols
数。对 rowspan
则没有限制,不过,可能会为了满足 rowspan
的要求而自动添加一些行。
可以用 mat-grid-tile-header
和 mat-grid-tile-footer
元素来为 mat-grid-tile
分别添加头部和尾部。
默认情况下,网格列表纯粹是作为装饰使用的,因此不用设置角色、ARIA 属性或键盘快捷键。这相当于在页面上有一系列 <div>
元素。
网格列表中的任何交互式内容都要根据应用程序的工作流进行适当的无障碍性处理。
如果网格列表用来表示一些非交互式内容型条目的列表,那么网格列表元素应该带有 role="list"
属性,而每个瓷砖应该带有 role="listitem"
属性。