我正在尝试实现Angular 2 Angular Material md-grid-list,并且在angualrjs的md-grid-list的先前版本中,有一个选项可以指定较小屏幕尺寸上的列数。我没有看到Angular 2 md-grid-list的任何文档,只有标记中的一个cols
参数。
这是我的代码:
<md-grid-list cols="3" rowHeight="4:3" gutterSize="4px">
<md-grid-tile
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background-image]="'url(' + tile.background + ')'"
class="mat-elevation-z1">
<md-grid-tile-footer>{{tile.title}}</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
这里是md-grid-list的angularjs版本:
<md-grid-list md-cols="2"
md-cols-sm="2"
md-cols-md="3"
md-cols-gt-md="3"
md-row-height-gt-md="4:3"
md-row-height="4:3"
md-gutter="4px"
md-gutter-gt-sm="4px"
style="margin: 0;">
<md-grid-tile ng-repeat="tile in vm.tiles track by $index"
md-rowspan="{{tile.span.row}}"
md-colspan="{{tile.span.col}}"
md-colspan-sm="{{tile.span.colSM}}"
md-colspan-xs="{{tile.span.colXS}}"
ng-class="tile.background"
ng-href="tile.link"
class="md-whiteframe-4dp">
</md-grid-tile>
</md-grid-list>
正如您在angularjs版本中所看到的,还有其他各种参数,例如md-cols-sm
和md-cols-md
。我想知道是否有人知道Angular 2的语法,因为屏幕大小更改只是压缩网格。任何和所有的帮助都非常感谢,提前谢谢。