Angular 6+
Angular Material 6+
我希望单个 mat-grid-tile
具有比其他图 block 更低的高度。尝试通过设置 [rowspan]=".3"
属性来做到这一点。它确实使磁贴及其内容高度变小了,但是这个“更小”的磁贴和下一个磁贴之间的空间仍然好像该磁贴具有 [rowspan]="1"
。设置下一个图 block 的 [rowspan]=".7"
并不能解决这个问题 - 它们仍然是每个全高行的相同空间。
<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);
}
这样做的正确方法是什么/如何解决上述问题?
最佳答案
通过将行拆分成更小的行来解决。增加 [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>
关于css - Angular Material 垫网格瓷砖高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52656236/