Angular 2 Angular Material md-grid-list列

时间:2017-07-18 19:50:42

标签: angular typescript angular-material2

我正在尝试实现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-smmd-cols-md。我想知道是否有人知道Angular 2的语法,因为屏幕大小更改只是压缩网格。任何和所有的帮助都非常感谢,提前谢谢。

0 个答案:

没有答案