如何始终为材料滑块显示拇指标签？答案

【问题标题】：How can I display thumb label all the time for material slider?如何始终为材料滑块显示拇指标签？
【发布时间】：2019-09-23 07:55:29
【问题描述】：

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

但是一旦不聚焦，标签就消失了。

我怎样才能得到标签？

【问题讨论】：

标签： angular angular-material

【解决方案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 上的工作演示

【讨论】：

【解决方案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

【讨论】：

如果您将建议的样式放在您的 custom-theme.scss 或 styles.css 中，那么它将起作用。如果你使用 ::ng-deep，那么你会希望像这样将它与主机一起使用 :host ::ng-deep { ...否则这些样式可能会流血。