angular material mat-grid-tile 高度

Question

Angular 6+
Angular Material 6+

我希望单个 mat-grid-tile 的高度低于其他瓷砖。尝试通过设置 [rowspan]=".3" 属性来做到这一点。它确实使磁贴及其内容高度变小了，但是这个 "smaller" 磁贴和下一个磁贴之间的 space 仍然好像磁贴有 [rowspan]="1" 一样。设置下一个图块的 [rowspan]=".7" 并不能解决它 - 它们仍然是相同的 space 全高行。

  <mat-grid-list [cols]="6" rowHeight="16rem">
    <mat-grid-tile [colspan]="2" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="4" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]=".3">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list> 

.dashboard-card {
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

这样做的正确方法是什么/如何解决上述问题？

Answer 1

通过将行拆分成更小的行来解决。增加 [rowspan] 和减少 rowHeight.

即：

  <mat-grid-list [cols]="6" rowHeight="4rem">
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>

angular material mat-grid-tile 高度

angular material mat-grid-tile height

css

angular-material2

angular