Question

我想将离子量程针放在旋钮的底部，并使其始终可见，如何在离子4中做到这一点，我知道如何在离子3中做到这一点，但似乎在离子4中不起作用可能是阴影DOM造成的

我无法访问 .range-md .range-pin 因为它在影子dom中 .range-md .range-knob-handle .range-pin 无法访问

.range-md .range-knob-handle .range-pin {
 transform: translate3d(0, 0, 0) scale(1); }

.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
 transform: scale(1); }

.range-ios .range-knob-handle .range-pin {
 transform: translate3d(0, 0, 0) scale(1); }

我如何将它们放置在ionic 4的底部？

Answer 1

This CSS will work to visible rangebar pin always.

.range-md .range-knob-handle .range-pin {
  transform: translate3d(0, 0, 0) scale(1); }

.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
  transform: scale(1); }

.range-ios .range-knob-handle .range-pin {
  transform: translate3d(0, 0, 0) scale(1); }

and, This CSS will work to move position of pin, if want to move pin to bottom, set css according to that. Also you can remove pin background using this css also.

.range-md .range-pin {
  color: #252525;
  top: 26px;
  background: transparent;
}

Answer 2

如果您使用的是Ionic版本，并且已经使用CSS Shadow Parts 3，则可以使用以下方法实现此目的：

ion-range::part(pin) {
  transform: translate3d(0px, 50px, 0px) scale(1);
}

ionic 4如何将离子范围引脚放置在范围底部

2 个答案: