ionic 4 как разместить пин-код ионного диапазона в нижней части диапазона

Я хочу разместить штифт ионного диапазона в нижней части ручек и сделать его всегда видимым, как я могу сделать это в ionic 4, я знаю, как это сделать в ionic 3, но, похоже, он не работает в ionic 4 и, вероятно, это вызвано теневым DOM

Я не могу получить доступ .range-md .range-pin, так как он находится в теневом домике, а также .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?


ionic-framework css ionic4 sass css-variables
person Hanna    schedule 29.08.2019    source источник
comment
Я думаю, вы ищете [(ngModel)]="knobValue" в вашем HTML и knobValue: number =0 в вашем .TS файле.   -  person Najam Us Saqib    schedule 29.08.2019
comment
@NajamUsSaqib, я хочу поместить штифт под ручку и сделать его всегда видимым, и когда я двигаю ручку, штифт движется вместе с ней   -  person Hanna    schedule 04.09.2019

Ответы (2)


arrow_upward
0
arrow_downward

Если вы используете ионную версию и уже используете CSS Shadow Parts 3, вы можете добиться этого, используя:

ion-range::part(pin) {
  transform: translate3d(0px, 50px, 0px) scale(1);
}
person Liu Zhang    schedule 03.10.2020

arrow_upward

arrow_downward

person    schedule
comment
В итоге я использовал плагин js, но, насколько я помню, вы не можете получить доступ к .range-md и .range-pin в ionic 4 - person Hanna; 08.11.2019
comment
Я реализовал этот css с помощью ionic 3 и его работы. - person Chandan Chhajer; 06.04.2020