javascript - 了解 Angular Material gridList

Question

我正在查看 Angular Material gridList .您可以在 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

Answer 1

您实际上可以从这里的 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">

基本上意味着创建一个网格列表，它有:

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

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

设备中的“六”列/网格大于 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") 表示图 block 之间的空间量应为 12 px。

( md-gutter-gt-sm="8px" ) 表示对于宽度大于 600px 的设备(比手机大)，图 block 之间的空间量应为 8px。