如何更改 Ionic 4 的 ion-range pin 字体和格式？

Question

例如，我在 global.scss 文件中尝试了这个：

.range-pin {
  color: white;
  font-family: sans-serif;

  &after:{
    content: " %";
  }
}

但这没有效果。我确定这与影子根有关，但我不确定在这里做什么是正确的。添加ion-range .range-pin更具体也无济于事。我如何实现这种改变？

Answer 1

您正确地认为ion-rangepin 是 shadow dom 的一部分，因此我们必须使用 Ionic 提供的 SCSS 变量来自定义 pin。

不幸的是，Ionic 文档并不总是列出所有变量，但是查看 Github 上范围组件的主源代码，我们可以了解当前可用的变量。

我查看range.md.scss 文件，其中包含可用于范围引脚的变量：

:host {
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{ion-color(primary, base, 0.26)};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-md-slider-height};
  --pin-background: #{ion-color(primary, base)};
  --pin-color: #{ion-color(primary, contrast)};

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-size: $range-md-pin-font-size;
}

:host表示宿主组件，即ion-range. 我们可以在 home.page.scss 文件中像这样使用背景和颜色的两个变量：

ion-range {
    --pin-background: black;
    --pin-color: red;
}

由于 font-family 不能作为变量使用，我们应该可以像这样直接使用它：

ion-range {
    --pin-background: black;
    --pin-color: red;
    font-family: sans-serif;
}

不幸:after的.range-pin是，定位 的部分是行不通的，因为它是影子 dom 的一部分。您可能需要找出一些其他的黑魔法来获得您想要的东西，或者可能建议 Ionic 团队在未来的版本中添加该变量:-)