javascript - ionic RTL - slider 上方向错误的 ionic 范围

Question

我正在尝试使用 RTL支持 Ionic 3+，但我在使用 ion-range 时发现了问题零件。

对于我所有的应用程序，我设置了 $app-direction: rtl;在 变量.scss 文件，在某些时候我需要添加 dir="rtl"在 HTML 文件中。

但在 ion-range 组件中，尽管显示方向正确，但 slider 的操作仍然是 LTR。如下图所示:





在第一个图像中，旋钮在正确的位置，但它不再起作用(它不移动)，并且可以意识到 slider 从错误的一侧(左侧)开始。在最后的图像中，很明显 slider 一直在 LTR 方向上工作。

我的代码:

<ion-footer no-shadow dir="rtl">
  <ion-toolbar position="bottom">
      <ion-row>
        <ion-col width-33 text-right class="label-range">
            מרחק: <ion-badge item-end>עד {{ distancia }} ק"מ</ion-badge>
        </ion-col>
      </ion-row>
      <ion-range min="10" max="100" step="10" snaps="true" color="secondary" [(ngModel)]="distancia">
            <ion-label class="label-range" range-left>10 ק"מ</ion-label>
            <ion-label class="label-range" range-right>100 ק"מ</ion-label>
      </ion-range>
  </ion-toolbar>
</ion-footer>

有什么方法可以设置 slider 方向吗？

Answer 1

ionic 团队仍在致力于为所有组件提供完整的 RTL 支持。他们还没有解决这个问题。

临时解决方案:

我刚刚找到了这个临时解决方案。您可以通过添加 dir="ltr" 使其在 RTL 中工作，而不是在 RTL 中完全中断范围 slider 。在 <ion-range>标签。这将在 LTR 方向显示范围 slider ，它会正常工作。

我正在密切关注 ionic 团队的解决方案，一旦解决就会更新答案。