Ionic Swipeable Tabs are now here!

perfect changed [root] to [tabRoot] now it works!

1 Like

This is awesome, great work!

Would be useful if you could turn swiping ability on and off from within a tab. For example, if you are a few levels deep in a tab and you don’t want the swipe to go to another tab - or you want to use swipes for something else, you could turn off tab swiping and turn it back on when you are back to needing it. ion-menu has this ability.

Also, a function to more easily open a specific page in a specific tab and have it slide into place. Current solution of finding the root nav child nav selected index and pushing a page there is overly complicated. Would be better if you could just import the tabs module into any page and then control it directly, like ion-menu.

Another thing would be if somehow you could refer to tabs by their name rather than index. That way if you change the order of the tabs, it doesn’t break all your code.

Great work! :+1:

Awesome! Great work :smiley:

Thank you for the suggestions @jelliben, I will take them into consideration.

1 Like

how does it work with the side menu?

can I still open it by swiping from left to right?

Great work! Been waiting for a solution to this for a while :slight_smile:

1 Like

This is awesome! Waited long enough for this indeed

Menu swiping will not work with this.

I think this is a better user experience anyways, so the menu doesn’t show when the user tries to swipe between tabs.

If I find a way to make the side menu work with this, I’ll add an input to configure this.

Actually that’s a good point, and it affects my app in particular. Maybe when you are on the left-most tab, it shouldn’t listen for right swipes, so the menu has a chance to be pulled. I’m moving my app around to make this work and on my left-most tab I have a left-side menu. It would be amazing if we could solve some of these issues.

Hi how to place the tabs at the bottom of the page, ive tried this with no luck
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
and my tabs are placed over the header is it normal?

Hi all this plugin doesnt work well with ionic slider, it adds one more blanc page

Hi all,
do you have problem like me?

If I have longer content, than if I scroll, the tabs hides under the header. It is doing in example too.

Is this common behaviour? Thanks

super-tabs surrounding with padding (16px) how to change it ? I tried with scss and style on html , both will not working . please tell me where to change .

<super-tab [tabRoot]=“studentProfileTab” title=“Profile”>
<super-tab [tabRoot]=“studentPerformanceTab” title=“Performance”>
<super-tab [tabRoot]=“studentAttendanceTab” title=“Attendance”>

@mayze123 I opened an issue to track this feature request:

Subscribe to the issue to get notified when it gets fixed.

@mayze123 could you please elaborate, what is the issue that you’re having? is it similar to the issue described here: ?

@mcihak I’m unable to reproduce this in the example project

Usually that would happen if you set the height attribute to be bigger than the space you have (page height minus header height). If you follow how the example project is done, you shouldn’t have any trouble.

@vageesh you probably have padding attribute added to your ion-content element.

@ihadeed Thanks for you reply. But this “bug” is right after cloning example and running it by ionic serve --lab command. I was trying to reduce height (minus header and other stuffs that are above tabs) but no luck.

I had an issue like this, one way to get around it is to remove completely (since it too is fixed at the top) and keep the super-tabs outside ion-content (since ion-content is a scroll view)

Thanks for this. will it work for 5 tabs as well? Can tab also scrollable?

Thanks, I am currently using two “slides” in conjunction for swipe-able tabs. One of the desired features for Swiped tabs is that when the tabs are not contained in the screen, the tabs can be slided to show more tabs. I do not see this in the demo.
Is this possible in your version ?

Hey everyone!

Just published ionic2-super-tabs@2.1.0. I would love it if you try it out and give me some feedback.

Here’s a summary of what’s new:

  • The module no longer uses ion-slides (swiper.js), it has it’s own sliding/animation mechanism now. It performs as good if not better than ion-slides. It will be improved in the future.
  • You can add scrollTabs attribute to allow tabs scrolling. Very useful if you have many tabs!
  • You can set the position of the tabs to top or bottom via the tabPlacement input.
  • You can add badges to any tab
  • You can enable/disable swiping globally, or per tab
  • New input options that allow to to customize animations, and work with side menus

Check out the release notes for full details including breaking changes and upgrade instructions:, also checkout the repository’s home page for more details on the new available options:


This is the way to do it! Great work! :+1: