mat-paginator 改变 mat-paginator-range-label 的位置 [英] mat-paginator change the placing of mat-paginator-range-label

问题描述

我有一个带有 mat-paginator 的简单 mat-table.

I have a simple mat-table with mat-paginator.

默认设计如下:

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

I would like to change the placing of the range label and put it between the navigation buttons, like this:

基本上，我需要在 button.mat-paginator-navigation-previousdiv.mat-paginator-range-label 一个元素> 和 button.mat-paginator-navigation-next.

Basically, I need to move the div.mat-paginator-range-label an element from the top of this container between button.mat-paginator-navigation-previous and button.mat-paginator-navigation-next.

知道怎么做吗?谢谢.

推荐答案

实际上是因为mat-paginator-container"使用了 flexbox，您只需使用自定义 CSS 代码即可轻松修改所有组件的默认放置.以我为例:

Actually because the "mat-paginator-container" uses flexbox you can easily modify the default placing of all the components just with a custom CSS code. For instance for me:

// 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;
    }
}

这篇关于mat-paginator 改变 mat-paginator-range-label 的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！