在垫网格列表(角度 6)中设置单个磁贴的行高度

Question

我有一个包含 n 个mat-card项目的mat-grid-list。在网格的底部，我想添加我自己的自定义分页器，该分页器位于页面的中心(出于各种原因，如果可能的话，我不想使用该mat-paginator(。

我尝试简单地在mat-grid-list元素下方添加一个<div>元素并将边距设置为0 auto;(这是我通常将div居中所做的(，但这似乎不起作用(分页器仍然顽固地左对齐(。

我可以向出现在所有其他磁贴之后的mat-grid-list添加一个新磁贴，并将其[colspan]设置为等于列数。当我这样做时，我得到了一个完全居中的分页器，除了有大量多余的高度(大概是因为它使用了其他mat-grid-tile项目的高度，这些项目非常大(。

有没有办法：a( 让分页器以自己的div居中对齐，或者 b( 更改单个mat-grid-tile的rowHeight，这样我就不会在分页器周围留下大量的空白？标记如下：

mat-grid-list与分页器在div

<div *ngIf="dataModel" class="container page-content">
<mat-grid-list cols="5">
<mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
<mat-card >
<mat-card-header>
<mat-card-title>{{ page.title }}</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
<mat-card-content>
{{ page.matches }}
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
<div class="paginator">
<button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
<mat-icon aria-label="Previous">navigate_before</mat-icon>
</button>
<ng-container *ngFor="let item of this.getPageArray(); let i = index;">
<button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
</ng-container>
<button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
<mat-icon aria-label="Next">navigate_next</mat-icon>
</button>
</div>
</div>

CSS for .paginator class

.paginator {
margin: 0 auto;
padding-top: 20px;
}

(注意：我也尝试将display设置为inline-block，将width设置为100%，但都不起作用(。

mat-grid-list with paginator in a separate垫网格瓷砖'

<div *ngIf="dataModel" class="container page-content">
<mat-grid-list cols="5">
<mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
<mat-card >
<mat-card-header>
<mat-card-title>{{ page.title }}</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
<mat-card-content>
{{ page.matches }}
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
<mat-grid-tile [colspan]="5">
<button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
<mat-icon aria-label="Previous">navigate_before</mat-icon>
</button>
<ng-container *ngFor="let item of this.getPageArray(); let i = index;">
<button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
</ng-container>
<button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
<mat-icon aria-label="Next">navigate_next</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
</div>

Answer 1

例如，可以尝试将单独磁贴的行跨度设置为 .5(或任何更适合的行跨度(。 我不确定它是否适用于这种语法，但它适用于我的情况，我显式地在mat-grid-list上设置了rowHeight，并对磁贴列表中的特定磁贴使用rows: .5。