定制垫分页器

Question

我正在尝试构建一个包含大量数据项的列表页面，因此为了简化阅读，我使用了 mat-paginator。我尝试在 mat-paginator 中自定义样式，但我做不了什么。现在我的分页器看起来像这样。enter image description here 我想让它看起来像这样。 enter image description here

我当前的 CSS 分页器代码是：

.mat-paginator-page-size{
      display: none !important;
}
.mat-paginator-range-label{
      display: none !important;
}

.mat-icon-button{
      border-radius: none;
      background-color: #00a6ff;
      height: 40px;
      width: 40px;
}

Answer 1

可以在组件 HTML 文件中自定义 mat-paginator。

看看下面的例子；

  <mat-paginator #paginator
    [length]=result.count
    [pageSize]=result.pageSize
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    [pageIndex]=result.page
    (page)="getNextPage($event)"
    [showFirstLastButtons]="true">
  </mat-paginator>

我们可以提供页面大小块、显示特定的分页按钮等。

您可以通过此 link https://material.angular.io/components/paginator/api

阅读有关其 API 文档的更多信息

这里还有关于 Stackblitz 的可配置分页示例，您可以试验一下 https://stackblitz.com/angular/ngdejmepgbr?file=app/paginator-configurable-example.html

Answer 2

你可以用这个class

.mat-icon-button { border: solid blue !important; border-radius: 5px !important; }

如果 Angular Style.css 是主 CSS 文件，则将其放在主 CSS 文件中。

Answer 3

您可以在 mat-paginator

中创建自己的组件

你可以通过这段代码得到启发

  ngAfterViewInit(): void {
  // get element
  const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-range-actions");
  if (!!list[0]) {
    // add what you need
    const div = this.renderer.createElement("div");
    this.renderer.addClass(div, "mat-paginator-page-info");
    list[0].appendChild(div);
 }
}

...

  ngAfterViewChecked() {
    // update added elements if needed
    const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-page-info");
    if (!!list[0]) list[0].innerHTML = `Page ${this.currentPage.toString()} of ${this.totalPages.toString()}`;
  }

您可以在 css

中使用 order: N 重新排列其顺序

定制垫分页器

Customizing mat paginator

pagination

angular