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

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

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")和中的"两个"列/网格

设备中的"六"列/网格大于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.