mat-paginator更改mat-paginator-range-label的位置 [英] mat-paginator change the placing of mat-paginator-range-label
问题描述
我有一个简单的mat-table
和mat-paginator
.
默认设计如下:
我想更改范围标签的位置并将其放置在导航按钮之间,如下所示:
I would like to change the placing of the range label and put it between the navigation buttons, like this:
基本上,我需要将div.mat-paginator-range-label
元素从此容器的顶部移至button.mat-paginator-navigation-previous
和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
.
有任何想法怎么做? 谢谢.
Any idea of how to do it? Thanks.
推荐答案
实际上,因为"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屋!