ionic-framework - Ionic 4 Range 栏自定义

Question

我正在使用带角度的 Ionic V4。我正在尝试自定义离子范围，但由于某种原因，我无法访问范围栏中的所有对象。例如：

我只需要将文本“TEST”放在 Pin 范围内，如图所示。

如果有人有一个好主意，不管离子范围如何，我很想听听。

Answer 1

由于旋钮是 ion-range 的 shadow DOM 的一部分，因此定制它并不容易。

您可以执行以下技巧，通过--knob-background 属性（Ionic 4）将文本“TEST”放置到旋钮上：

模板：

      <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>

scss：

.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