理解 angular-material gridList
Understanding angular-material gridList
我正在经历 angular-material gridList. You can see the example in codepen here。我想了解以下属性在此示例中的含义以及如何使用它们。文档似乎对此保持沉默。
md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm
您实际上可以从 angular material 文档中了解这些的含义:
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">
基本上是创建一个网格列表,其中有:
"One" column/grid 在小型设备中 (md-cols-sm="1"
),
"Two" columns/grids 中型设备 (md-cols-md="2"
) 和
"Six" columns/grids 在宽度大于 960 像素 (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"
) 表示图块之间的 space 数量应为 12 px。
( md-gutter-gt-sm="8px"
) 表示对于宽度大于 600px 的设备(大于手机),图块之间的 space 数量应为 8px。
我正在经历 angular-material gridList. You can see the example in codepen here。我想了解以下属性在此示例中的含义以及如何使用它们。文档似乎对此保持沉默。
md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm
您实际上可以从 angular material 文档中了解这些的含义:
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">
基本上是创建一个网格列表,其中有:
"One" column/grid 在小型设备中 (md-cols-sm="1"
),
"Two" columns/grids 中型设备 (md-cols-md="2"
) 和
"Six" columns/grids 在宽度大于 960 像素 (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"
) 表示图块之间的 space 数量应为 12 px。
( md-gutter-gt-sm="8px"
) 表示对于宽度大于 600px 的设备(大于手机),图块之间的 space 数量应为 8px。