了解角材料gridList

Question

我在看角质材料gridList。您可以在codepen 这里中看到这个示例。我想了解下面的属性在本例中意味着什么，以及如何使用它们。文件似乎对此一言不发。

md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm

Answer 1

您实际上可以从角度材料文档中获得这些信息的含义：

https://material.angularjs.org/latest/api/directive/mdGridList

和

https://material.angularjs.org/latest/layout/options

您可能在这里注意到，-sm-，-md-和-lg-基本上是media-query-name，它们分别针对小型、中型和大型设备。

现在，根据你的问题

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">

基本上意味着创建一个网格列表，其中包括：

小型设备中的“一个”列/网格(md-cols-sm="1")，

中型设备(md-cols-md="2")中的“两”列/网格

大于960pxWide (md-cols-gt-md="6")的设备中的“六”列/网格。

其次，( md-row-height-gt-md="1:1")意味着在大于960px宽度的设备中，宽度与高度的比率应该是1:1。

( md-row-height="2:2")指宽度与高度之比应为2:2。

( md-gutter="12px")指瓷砖之间的间距应为12 px。

( md-gutter-gt-sm="8px" )意味着，大于600 8px宽度(大于电话)的设备之间的间隔应该为8 8px。