RTL Support

[assaf13]

Is there any configuration that change the default position of the tabs from left to write -> change it to from right to left (first tab most right)? Also change the swipe direction to left instead of write?

[ihadeed]

Not at the moment. But we can add this feature for sure ...

[abdellahx01]

i have quick solution !!!! , just change direction of "super-tabs" to rtl dir:"rlt" and change order of super-tab also don't forget to set max value for selectedTabIndex ...

hop this help some one

[AbraamNader]

Just to clarify what I think @abdellahx01 means with scss:

super-tabs {
    direction: ltr;
  }

  super-tab {
    direction: rtl;
  }

and then reverse order the tabs like so:

<super-tabs selectedTabIndex="3">
    <super-tab [root]="page3" title="Third page"></super-tab>
    <super-tab [root]="page2" title="Second page"></super-tab>
    <super-tab [root]="page1" title="First page"></super-tab>
</super-tabs>

While this workaround works fine in terms of how it looks, I'm hopeful for a better solution.

Note: selectedTabIndex is currently broken since getActiveChildNavs is not currently working in ionic-angular 3.6.0

[Cyberfolks]

sir please add support for Right Direction

[ahmedelatab]

@ihadeed Thanks for this awesome plugin!

Have you implemented the RTL feature or not yet?!

I'm using this plugin in developing ionic 4 app, but the solution of @abdellahx have not worked, since changing the direction of "super-tabs" to rtl and reversing the order of super-tab will arrange the tabs correctly from right to left, but setting the max value for selectedTabIndex or setting the min value always result in selection of the last tab!!! In addition, I have to resize the screen in browser to let the content of the tabs appear, knowing that on the real device the content of the tabs are not showing at all when applying the rtl property!

I had tried calling the method "selectTab(max)" which selects correctly the first tab on the right, but when the screen loads I noticed that the last tab is selected before the method "selectTab(max)" swipes to the first tab, where sometimes the first tab is selected partially until I resize the screen.

Also, when trying to swipe from the first tab to the second tab, this will take me to the last tab (only for the first time)!

It seems that the super-tabs will be stable only if the initial index is the most left one!

Any solution or alternatives?!

[mansourcodes]

Just to clarify what I think @abdellahx01 means with scss:

super-tabs {
    direction: ltr;
  }

  super-tab {
    direction: rtl;
  }

and then reverse order the tabs like so:

<super-tabs selectedTabIndex="3">
    <super-tab [root]="page3" title="Third page"></super-tab>
    <super-tab [root]="page2" title="Second page"></super-tab>
    <super-tab [root]="page1" title="First page"></super-tab>
</super-tabs>

While this workaround works fine in terms of how it looks, I'm hopeful for a better solution.

Note: selectedTabIndex is currently broken since getActiveChildNavs is not currently working in ionic-angular 3.6.0

same solution