angular - 如何更改 Ionic 4 的 ionic 范围引脚字体和格式？

Question

作为一个例子，我在我的 global.scss 文件中尝试了这个:

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

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

但这没有任何效果。我确信这与影子根有关，但我不确定这里应该做什么。添加更具体的 ion-range .range-pin 也没有帮助。我如何实现这一改变？

Answer 1

您说得对，ion-range pin 是 Shadow dom 的一部分，因此我们必须使用 Ionic 提供的 SCSS 变量来自定义 pin。

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

我看range.md.scss file其中包含可用于范围引脚的变量:

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

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