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

Posted 2023-03-07

【中文标题】如何更改 Ionic 4 的 ion-range pin 字体和格式？

【英文标题】：How do I change Ionic 4's ion-range pin font and formatting?

【发布时间】：2019-11-21 13:26:54

【问题描述】：

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

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

  &after:
    content: " %";
  

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

【参考方案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 团队在未来的版本中添加变量:-)

【讨论】：

很抱歉重新打开这个问题，但解决方案对我不起作用，我们仍然应该这样做吗？在 global.scss 和 home.scss 中，我添加了 ion-range --pin-color: red; 但图钉中的文本仍然是黑色

我找到了解决方案，只是因为在 ion-range 的 html 中我有 color="primary"，所以我猜它覆盖了我的 pin 属性。我删除了这个属性，并在 scss 中添加了 --bar-background。

【参考方案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;
        

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