如何更改 Ionic 4 的离子范围引脚字体和格式？

Question

例如，我在我的 global.scss 文件中试过这个：

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

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

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

Answer 1

ion-range pin 是阴影的一部分是正确的 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 部分是行不通的，不幸的是因为它是影子 dom 的一部分。您可能需要想出一些其他黑魔法才能得到您想要的东西，或者建议 Ionic 团队在未来的版本中添加该变量:-)

Answer 2

虽然我的回答不是针对你的问题，但它可能会对某些人有所帮助，因为我也被困在这个问题中，我无法更改离子范围的引脚和旋钮的背景颜色，因为在模板文件中，我像这样设置离子范围的颜色

<ion-range color="light" class="range" pin="true" min="18" max="32" step="1" debounce="1000</ion-range>

所以 css 自定义属性在 scss

中不起作用

.range {
            --knob-size: 40px;
            --knob-background: green !important;
            --bar-background: white;
            --bar-background-active: white;
            display: block;
            height: 40px;
            padding: 0 15px;
        }

所以不要在模板文件中设置颜色属性

如何更改 Ionic 4 的离子范围引脚字体和格式？

How do I change Ionic 4's ion-range pin font and formatting?

sass

ionic-framework

angular

ionic4