文章/答案/技术大牛

发布

社区首页 >问答首页 >需要从角垫分页器中移除或自定义分页箭头。

问需要从角垫分页器中移除或自定义分页箭头。
EN

Stack Overflow用户

提问于 2018-10-15 07:08:41

回答 3查看 7.8K关注 0票数 0

我实际上需要移除角垫分页器中的箭头，因为我需要定制的设计。如果可以更改这些箭头的样式，也可以解决此问题。下面是到mat分页器的链接。

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

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

提前谢谢。

angular6

html

css

angular

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-15 07:15:21

您可以覆盖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。

票数 2

Stack Overflow用户

发布于 2018-10-15 07:17:48

请尝试下面的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;
    }

票数 4

Stack Overflow用户

发布于 2021-08-09 09:54:59

您可以使用这些类将寻呼机样式设置为您喜欢的样式：

分页器-导航-第一(1)
mat-分页器-导航-先前(2)
mat-分页器-导航-下一步(3)
垫子-分页器-导航-最后(4)
垫子-分页器-范围标签(5)
垫子-分页器-范围-动作(6)
分页器-页面大小-选择(7)
分页器-页大小-标签(8)
分页器-页码大小(9)

在我的例子中，我只想留下下拉列表(9)，所以我用一个显示来隐藏其余的内容:无：

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

结果：

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52811409

复制

相似问题

问需要从角垫分页器中移除或自定义分页箭头。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要从角垫分页器中移除或自定义分页箭头。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要从角垫分页器中移除或自定义分页箭头。
EN