更改离子范围针的位置

Question

我有一个离子range组件。默认情况下，如果在HTML中将pin属性设置为true，则在按下旋钮时会显示具有整数值的引脚。但是它出现在旋钮的顶部，如下图所示：

A B C D E
5 1 2 2 4
7 3 5 1 7
1 2 8 4 9

是否可以使其显示在旋钮的下方？我查看了Sass变量，但没有发现任何有用的变量。

Answer 1

最后，我找到了一种仔细检查HTML并查看CSS类的方法。正确的类是range-pin，我可以这样访问它：

.range .range-knob-handle .range-pin {
        top: 40px;    // <--- Change this to manually position the pin
        font-size: 14px;    // You can also change other properties
        color: orange;
    }
}

结果：

Answer 2

.range .range-knob-handle .range-pin { 顶部：40px； // <-将其更改为手动定位 font-size：14px; //您也可以更改其他属性 颜色为橙色; }

如果我添加它，css将无法正常工作。

Answer 3

使用阴影部分的最佳做法。

ion-range::part(pin) {
  top: 40px;
  transform: none;
}