Mat 分页器更改工具提示位置

Question

我正在尝试将

mat-paginator

的工具提示放置在更靠近分页按钮的位置。目前，工具提示距离太远，见下文：

我尝试更新

.cdk-overlay-pane

和

.mat-tooltip-panel

课程，但对我不起作用。任何积分都将受到高度赞赏！

Answer 1

需要深入组件内部

::ng-deep body .cdk-overlay-container {
    .mat-tooltip {
        top: 104px;
    }
}

Answer 2

将底部样式应用于 mat-tooltip-panel 类。它可以解决问题..并且它对我有用

::ng-deep body .cdk-overlay-container {
  .mat-tooltip-panel {
    bottom: 100px !important;
  }
}

Answer 3

::ng-deep body .cdk-overlay-container {
  .mat-tooltip-panel {
    bottom: 10px !important;
  }
}

上述解决方案修复了工具提示位置在滚动条上无法正常工作的问题。

相反，我们可以使用 margin 属性。请找到下面的代码。

::ng-deep body .cdk-overlay-container {
  .mat-tooltip-panel {
    margin-bottom: 10px !important;
  }
}

这对我来说是正确的。

Answer 4

您可以创建自定义 MatPaginatorIntl 并将标签设置为空字符串：

import { MatPaginatorIntl } from '@angular/material';

export class MatPaginatorHideLabels extends MatPaginatorIntl {
   itemsPerPageLabel = '';
   nextPageLabel     = '';
   previousPageLabel = '';
}

然后您可以将其添加到全局提供程序中，或者如果您想更具体，也可以将其添加到组件上的提供程序中。

@Component({
    providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorHideLabels }]
})