angular - mat-paginator 改变 mat-paginator-range-label 的位置

Question

我有一个简单mat-table的 with mat-paginator。

默认设计如下：

我想更改范围标签的位置并将其放在导航按钮之间，如下所示：

基本上，我需要将div.mat-paginator-range-label这个容器顶部的 an 元素移动到button.mat-paginator-navigation-previous和之间button.mat-paginator-navigation-next。

知道怎么做吗？谢谢。

标签： angularpaginationangular-materialangular-material2

Answer 1

实际上，因为“mat-paginator-container”使用了 flexbox，您只需使用自定义 CSS 代码即可轻松修改所有组件的默认放置。例如对我来说：

// override material paginator
::ng-deep .mat-paginator {
    .mat-paginator-container {
        justify-content: center;
    }

    // override material paginator page switch
    .mat-paginator-range-label {
        order: 2;
    }

    .mat-paginator-navigation-previous {
        order: 1;
    }
    .mat-paginator-navigation-next {
        order: 3;
    }
}