diff --git a/src/components/tabs/core-tabs.html b/src/components/tabs/core-tabs.html index 7b0e2954b..5799c09bd 100644 --- a/src/components/tabs/core-tabs.html +++ b/src/components/tabs/core-tabs.html @@ -5,7 +5,7 @@ - + diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index a33a2bfae..4c2cfc506 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -62,18 +62,6 @@ ion-app.app-root .core-tabs-bar { } } - - @include rtl() { - .swiper-container-horizontal { - transform: scaleX(-1); - .swiper-wrapper { - flex-direction: row-reverse; - ion-slide { - transform: scaleX(-1); - } - } - } - } } ion-app.app-root.md .core-tabs-bar a.tab-slide { diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 2dc4faf73..d46d12170 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -16,7 +16,9 @@ import { Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, ViewChild, ElementRef, SimpleChange } from '@angular/core'; -import { Content, Slides } from 'ionic-angular'; +import { Content, Slides, Platform } from 'ionic-angular'; +import { TranslateService } from '@ngx-translate/core'; +import { Subscription } from 'rxjs'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreAppProvider } from '@providers/app'; import { CoreTabComponent } from './tab'; @@ -59,6 +61,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe maxSlides = 3; slidesShown = this.maxSlides; numTabsShown = 0; + direction = 'ltr'; protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content. protected initialized = false; @@ -77,10 +80,20 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe protected firstSelectedTab: number; protected unregisterBackButtonAction: any; + protected languageChangedSubscription: Subscription; constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider, - protected appProvider: CoreAppProvider) { + protected appProvider: CoreAppProvider, platform: Platform, translate: TranslateService) { this.tabBarElement = element.nativeElement; + + this.direction = platform.isRTL ? 'rtl' : 'ltr'; + + // Change the side when the language changes. + this.languageChangedSubscription = translate.onLangChange.subscribe((event: any) => { + setTimeout(() => { + this.direction = platform.isRTL ? 'rtl' : 'ltr'; + }); + }); } /**