如何始终显示材质滑块的拇指标签？

Question

我想让拇指标签始终显示，无论它是否聚焦。 当我单击滑块时，它会显示这样的标签。

但是一旦它没有聚焦，标签就消失了。

我如何获得标签标签？

Answer 1

Angular Material默认情况下不提供此功能，但是您可以通过在全局css文件中添加以下css来解决此问题：

.mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }

.mat-slider-thumb {
    transform: scale(0) !important;
}

.mat-slider-thumb-label-text {
    opacity: 1 !important;
}

正在stackblitz上进行演示

Answer 2

在我将其包裹在ng-deep中之前，接受的答案对我来说一直没有作用

::ng-deep {
  .mat-slider-thumb-label {
    transform: rotate(45deg) !important;
    border-radius: 50% 50% 0 !important;
  }  
  .mat-slider-thumb {
    transform: scale(0) !important;
  }  
  .mat-slider-thumb-label-text {
    opacity: 1 !important;
  }
}

此解决方案来自michaelpwilson，这里：https://github.com/angular/components/issues/4803