离子RTL - 滑块

时间:2018-03-24 15:37:02

标签: javascript css3 ionic-framework ionic3 ion-range-slider

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

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

但是在离子范围组件中,尽管显示方向正确,但滑块的操作仍为LTR。如下图所示:

enter image description here

enter image description here

在第一张图片中,旋钮位于正确的位置,但它不再起作用(它不会移动),并且可以意识到滑块从错误开始一边(左边)。在最后一张图片中,很清楚滑块在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>

有没有办法设置滑块方向?

2 个答案:

答案 0 :(得分:0)

离子团队正在为所有组件提供完整的RTL支持。他们还没有解决这个问题。

临时解决方案:

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

我正密切关注离子团队的解决方案,一旦解决后会更新答案。

答案 1 :(得分:0)

我用这个。

index.html -> dir="rtl"

在组件中,使用mode="ios"。很好。

image