Иони c 4 Диапазон бар настроить - PullRequest
Новая
       38

Иони c 4 Диапазон бар настроить

2 голосов
/ 09 января 2020

Я использую Ioni c V4 с angular. Я пытаюсь настроить диапазон ионов, но по какой-то причине я не могу получить доступ ко всем объектам в пределах диапазона. Например:

Мне просто нужно поместить текст "TEST" в диапазон Pin, как вы можете видеть на картинке.

Если у кого-то есть хорошая идея, независимо от диапазона Ioni c Я хотел бы услышать.

enter image description here

1 Ответ

0 голосов
/ 10 января 2020

Поскольку ручка является частью теневого DOM ионного диапазона, ее нелегко настроить.

Вы можете сделать следующий трюк, чтобы поместить текст «TEST» на ручку с помощью - свойство фона регулятора (Иони c 4):

шаблон: 

      <ion-item>
        <ion-range min="-200" max="200" color="secondary" class="rangeWithKnobText">
          <ion-label slot="start">-200</ion-label>
          <ion-label slot="end">200</ion-label>
        </ion-range>
      </ion-item>

s css: 

.rangeWithKnobText {
    --knob-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 150 150' style='background-color:white'%3E%3Ctext style='font-size: 48px' fill='black' x='20' y='92'%3ETEST%3C/text%3E%3C/svg%3E") no-repeat; 
    --knob-size: 40px
}

демо:

https://stackblitz.com/edit/ionic-v4-angular-tabs-aycdyq

В основном вы используете css свойство фона и встраивание SVG (в кодировке) в качестве URL-адреса фона

...