需要从角垫分页器上删除或自定义分页箭头

Question

由于我需要自定义设计，因此我实际上需要删除存在于角垫分页器上的箭头。如果可以更改这些箭头的样式，也可以解决。到mat-paginator的链接在下面。

https://material.angular.io/components/paginator/overview

The arrows which i need to remove are shown in following picture.

谢谢。

Answer 1

请尝试以下CSS代码。

  .mat-paginator-navigation-previous {
        display: none !important;
    }

.mat-paginator-navigation-next {
            display: none !important;
        }

（或）

  .mat-paginator-navigation-previous {
       opacity: 0 !important;
       width: 0;
       height: 0;
   }

   .mat-paginator-navigation-next {
      opacity: 0 !important;
      width: 0;
      height: 0;
    }

Answer 2

您可以覆盖CSS类mat-paginator-icon

例如：

/deep/ .mat-icon-buton{
  background-color: yellow;
}

  

在覆盖任何材料类之前，请不要忘记附加/deep/。

演示在这里https://stackblitz.com/edit/angular-material-pagination-123456

注意：更好的办法是用实际主题https://material.angular.io/guide/theming覆盖CSS。

Answer 3

您可以使用这些类根据自己的喜好设置寻呼机的样式：

• mat-paginator-navigation-first (1)
• mat-paginator-navigation-previous (2)
• mat-paginator-navigation-next (3)
• mat-paginator-navigation-last (4)
• mat-paginator-range-label (5)
• mat-paginator-range-actions (6)
• mat-paginator-page-size-select (7)
• mat-paginator-page-size-label (8)
• mat-paginator-page-size (9)

在我的例子中，我只想留下下拉列表 (9)，所以我用 display 隐藏了其余部分：none:

 .mat-paginator-range-actions {
            display: none !important;
  }

结果：