Question

作为示例，我在global.scss文件中尝试了此操作：

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

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

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

Answer 1

您正确的认为ion-range引脚是影子域的一部分，因此我们必须使用Ionic提供的SCSS变量来自定义该引脚。

不幸的是，离子文档并不总是列出所有变量，但是通过查看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;
}

由于字体家族不能作为变量使用，所以我们应该能够像这样直接使用它：

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

不幸的是，将目标对准:after的{{1}}部分是行不通的，因为它是影子域的一部分。您可能必须弄清楚其他一些黑魔法才能得到想要的东西，或者可能向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;
        }

因此不要在模板文件中设置color属性

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

2 个答案: