始终在 md-slider 中显示评分气泡

Posted 2023-03-06

【中文标题】始终在 md-slider 中显示评分气泡

【英文标题】：Always display the Rating bubble in md-slider

【发布时间】：2015-08-07 12:06:17

【问题描述】：

我在md-discrete 模式下通过md-slider。 但是，我想像这样一直显示滑块气泡：

当我点击其他任何地方时，我不希望这个气泡消失。 有没有办法做到这一点？

【参考方案1】：

您可以通过覆盖一些 css 规则来做到这一点，默认情况下，气泡将仅在活动/焦点状态下通过以下规则显示：

md-slider[md-discrete]:not([disabled]):focus .md-sign,
md-slider[md-discrete]:not([disabled]):focus .md-sign:after,
md-slider[md-discrete]:not([disabled]).active .md-sign,
md-slider[md-discrete]:not([disabled]).active .md-sign:after 
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);

因此，您可以通过制定绝对规则来覆盖它以始终显示它。即：

md-slider[md-discrete] .md-sign,
md-slider[md-discrete] .md-sign:after 
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);

Demo

【讨论】：

您提供的演示链接并不总是按问题显示气泡。我错过了什么吗？

【参考方案2】：

另一种快捷方式是使用onblur="this.focus()"，如下所示：

<md-slider id="my-slider" flex onblur="this.focus()" md-discrete ng-model="3" min="1" max="5" aria-label="rating">

在 javascript 里面做：

$("#my-slider").focus();

【参考方案3】：

其他解决方案都不适合我。唯一对我有用的是将 css 类“_md-active”添加到滑块。

document.getElementById("YOUR-MD-SLIDER-ID").className += " _md-active";

【参考方案4】：

md-slider 包含 2 部分：md-track-container 和 md-thumb-container。 你可以通过css修改你需要的部分。 这是要显示的图像和代码。

<md-slider title="md-title" style="margin-top: -31px;margin-left: 45px;" id="red-slider" md-discrete="" round="0" ng-model="" step="5" min="0" max="100" aria-label="rating" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty" tabindex="0" role="slider" aria-valuenow="55" aria-invalid="false" aria-valuemin="0" aria-valuemax="100">
<div class="md-slider-wrapper">
    <div class="md-track-container">
        <div class="md-track"></div>
        <div class="md-track md-track-fill" style="width: 55%;"></div>
        <div class="md-track-ticks"><canvas style="position:absolute;"  ></canvas> </div>
    </div>
    <div class="md-thumb-container" style="left: 55%;">
        <div class="md-thumb"></div>
        <div class="md-focus-thumb"></div>
        <div class="md-focus-ring"></div>
        <div class="md-sign"><span class="md-thumb-text">55</span></div><div class="md-disabled-thumb"></div>
    </div>
</div>
</md-slider>

CSS：

md-slider[md-discrete] .md-track-container,
md-slider[md-discrete] .md-track-container:after 
  height: 5px;


md-slider[md-discrete] .md-track-ticks,
md-slider[md-discrete] .md-track-ticks:after 
  display: none;

【参考方案5】：

始终显示气泡

.mat-slider-horizontal .mat-slider-thumb-label 
    transform: rotate(45deg) !important;

要显示的文字

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

更改拇指颜色

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, 
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label 
    background-color: green;

更改填充颜色

.mat-accent .mat-slider-track-fill, .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label 
    background-color: $greenColor;

【参考方案6】：

这种方法对我有用：

::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