mat-paginator изменить размещение mat-paginator-range-label - PullRequest
Новая
       31

mat-paginator изменить размещение mat-paginator-range-label

0 голосов
/ 14 февраля 2019

У меня есть простой mat-table с mat-paginator.

По умолчанию дизайн выглядит следующим образом: enter image description here

Я хотел бы изменить расположение метки диапазона и поместить ее между кнопками навигации, как это:

enter image description here

По сути, мне нужно переместить элемент div.mat-paginator-range-label из верхней части этого контейнера между button.mat-paginator-navigation-previous и button.mat-paginator-navigation-next.

enter image description here

Есть идеи, как это сделать?Спасибо.

Ответы [ 3 ]

0 голосов
/ 15 марта 2019

Тарас, спасибо за ответ!Это то, что мне действительно нужно!Я выполнил вашу рекомендацию и получил такой результат:

Реализован с меткой после диапазона

0 голосов
/ 03 мая 2019

На самом деле, поскольку «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;
    }
}
0 голосов
/ 14 февраля 2019

Хорошо, я создаю решение, как это сделать.Я использую Renderer2 для выполнения манипуляции с DOM, и это выглядит так: 

@ViewChild("paginator", {read: ElementRef}) paginator: ElementRef;

ngAfterViewInit(): void {
        this._renderer.insertBefore(
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button').parentNode,
            this.paginator.nativeElement.querySelector('.mat-paginator-range-label'),
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button'));
    }

В моем случае this._renderer является экземпляром Renderer2, а также HTMLкод с ViewChild декоратором. 

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Если кто-то знает лучшее решение, как это сделать, пожалуйста, дайте мне знать.В противном случае, я надеюсь, что мой ответ поможет вам с аналогичной задачей.Спасибо

...