html - 在 mat-grid-list (Angular 6) 中设置单个图 block 的行高

Question

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

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

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

有没有办法:a) 让分页器在它自己的 div 中居中对齐或 b) 更改 rowHeight单个 mat-grid-tile这样我就不会在分页器周围出现大量可笑的空白区域？标记如下:

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>

.paginator 类的 CSS

.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

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