了解angular-material 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

您可以从角度材料文档中获取这些含义：

和

您可能会注意到，-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" ）和

设备中的“六”列/网格宽度大于960px（ 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像素。

（ md-gutter-gt-sm="8px" ）表示宽度大于600px（大于手机）的设备的平铺间距应为8px。