diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index 424281bb5e..9d69e4851e 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -144,7 +144,7 @@ $toggle-ios-item-end-padding-start: $item-ios-padding-start !default; background-color: $toggle-ios-handle-background-color; box-shadow: $toggle-ios-handle-box-shadow; - transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; + transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms; will-change: transform; contain: strict; diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts index 3037fc6abc..f74fb5fde5 100644 --- a/src/components/toggle/toggle.ts +++ b/src/components/toggle/toggle.ts @@ -155,16 +155,18 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo let activated: boolean; if (this._value) { - if (currentX + 15 < this._startX) { + if ((this._plt.isRTL && (currentX - 15 > this._startX)) || + (!this._plt.isRTL && (currentX + 15 < this._startX))) { dirty = true; value = false; activated = true; } - } else if (currentX - 15 > this._startX) { + } else if ((this._plt.isRTL && (currentX + 15 < this._startX)) || + (!this._plt.isRTL && (currentX - 15 > this._startX))){ dirty = true; value = true; - activated = (currentX < this._startX + 5); + activated = (this._plt.isRTL ? (currentX > this._startX - 5) : (currentX < this._startX + 5)); } if (dirty) { @@ -190,12 +192,14 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo this._zone.run(() => { if (this._value) { - if (this._startX + 4 > endX) { + if ((this._plt.isRTL && (this._startX - 4 < endX)) || + (!this._plt.isRTL && (this._startX + 4 > endX))){ this.value = false; this._haptic.selection(); } - } else if (this._startX - 4 < endX) { + } else if ((this._plt.isRTL && (this._startX + 4 > endX)) || + (!this._plt.isRTL && (this._startX - 4 < endX))) { this.value = true; this._haptic.selection(); }