[英]Understanding angular-material gridList
I was going through angular-material gridList . 我正在经历角度材料gridList 。 You can see the example in codepen here .
您可以在此处查看codepen中的示例。 I want to understand what following attributes means in this example and how to use them.
我想了解以下属性在此示例中的含义以及如何使用它们。 documentation seems silent on it.
文档似乎没有提及。
md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm
You can actually get the meaning of these from angular material docs here: 您可以从角度材料文档中获取这些含义:
https://material.angularjs.org/latest/api/directive/mdGridList https://material.angularjs.org/latest/api/directive/mdGridList
And 和
https://material.angularjs.org/latest/layout/options https://material.angularjs.org/latest/layout/options
You may notice here, that, -sm-, -md-, and -lg- are basically media-query-name
that are meant to target small, medium, and large devices, respectively. 您可能会注意到,-sm-,-md-和-lg-基本上是
media-query-name
,分别用于定位小型,中型和大型设备。
Now, as per your question, 现在,根据你的问题,
<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">
basically means to create a grid list, which has: 基本上意味着创建一个网格列表,其中包含:
"One" column/grid in small devices ( md-cols-sm="1"
), 小型设备中的“一个”列/网格(
md-cols-sm="1"
),
"Two" columns/grids in medium devices ( md-cols-md="2"
) and 中型设备中的“两个”列/网格(
md-cols-md="2"
)和
"Six" columns/grids in devices greater than 960px wide ( md-cols-gt-md="6"
). 设备中的“六”列/网格宽度大于960px(
md-cols-gt-md="6"
)。
Next, ( md-row-height-gt-md="1:1"
) means that the Ratio of width to height in devices greater than 960px width should be 1:1. 接下来,(
md-row-height-gt-md="1:1"
)表示大于960px宽度的设备中宽度与高度的比率应为1:1。
( md-row-height="2:2"
) means that the Ratio of width to height should be 2:2. (
md-row-height="2:2"
)表示宽高比应为2:2。
( md-gutter="12px"
) means that the amount of space between tiles should be 12 px. (
md-gutter="12px"
)表示图块之间的间距应为12像素。
( md-gutter-gt-sm="8px"
) means that the amount of space between tiles for devices greater than 600px width (bigger than phones) should be 8px. (
md-gutter-gt-sm="8px"
)表示宽度大于600px(大于手机)的设备的平铺间距应为8px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.