始终在md-slider中显示Rating bubble

Question

我经历MD-滑块的md-discrete模式.但是,我想一直显示滑块气泡,如下所示:

当我点击其他地方时,我不希望这个泡泡消失.有没有办法做到这一点 ？

Answer 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);
}

演示