Ionic Swipeable Tabs are now here!


No possibility to do that?



On a page I have native googlemaps, and I can not move the map, is there any solution?



Hi guys,
when I redirect to page with tabs with set tab index to 1, the tab is selectet right, but no data are rendered. This data are in variable and logged in console, so data are there.

If I change tab and return to the tab from redirect. It works that.

Do you have any idea what can be wrong?

redirect is:

 this.navCtrl.push(Dashboard, {
      selectedTab: 1

and tabs:

 <super-tabs scrollTabs selectedTabIndex="{{selectedTab}}" (tabSelect)="onTabSelect($event)">


Hi @mcihak, I had the similar issue. I tried your css:

.indicator {
    transform: translate3d(0px, 0px, 0px) scale3d(1.05, 1, 1) !important;
    transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1) !important;

But the indicator position does not even change when switching to a tab that is not the first tab. Could you please post a bit more of your html and css. Thanks :smiley:


Hi, from new version of ionic and tabs I am not doing this any more. So try to update your versions.


Danke schön @mcihak!


when I use badge attribute, e.g.

<super-tab [root]="salesPage" title="Sales" icon="cart" badge="30"></super-tab>
<super-tab [root]="messagePage" title="Message" icon="mail"></super-tab>

badge “30” was too close to the next title “Message”, so I increased the margin-right of super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon to 50px, but class .indicator’s position is off now, i.e. selecting the second tab “Message” and its indicator line is no longer aligned exactly below the second tab.

Please see screenshots:

I know the position and width of .indicator is calculated at runtime, but is there a way to increase the space between any two tabs while also keeping the indicator line right below its tab title? Any idea is really appreciated.


Hi. Can you help me out my problem. My problem is I can’t slide the tab. I did configuration according to the pictures above.


Hi @phyokyaw, Have you added scrollTabs in your super-tabs tag like this: <super-tabs scrollTabs><super-tab ...></super-tab></super-tabs>


For people who wanna position indicator right below its title, you need add margin in super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon ion-icon and super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button .title. If you add margin in super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon, your indicator line will not have the correct offset, i.e. indicator line will not be placed right below its title.
If you wanna see the result, please refer to this screenshot:


did you solve showing badge after redirect from another page back to page with tabs badges? They do not show to and do not know what can be wrong :-/


Sorry @mcihak, I do not have the issue that badge is not being displayed after returning from other pages. Btw I’m using “ionic-angular”: “3.6.0”. Badge is missing after returning from other pages sounds like badgeVar in <super-tab [badge]="badgeVar"></super-tab> becomes undefined after returning from other pages. Cheers


@JoseMendes did you get solution of that error?
Thanks for the super-tabs. :slight_smile:


@ihadeed Hi , how can I reference tab’s index in app.component.ts so that when tab page selected from the side menu, it slides to that tab page (just like ionic-conference-app) tab and sidemenu based. I tried @ViewChild(SuperTabs) superTabs: SuperTabs; and openPage(page) { this.superTabs.slideTo(page.index) } but it didn’t work throwing error Cannot read property 'slideTo' of undefined.


Hi did u got any solution for this?? am also facing the same issue


I’m also having this issue. Did you guys figured it out?

@aravindemc2 @yasirpanjsheri


yes. I already added scrollTabs but it does not seem work slide.
And I want to ask how can I add content without using root binding.
Thanks you.


Sorry for the late reply @phyokyaw.

  1. It’s strange that super tabs does not slide if you added scrollTabs attribute in super-tabs element. It did work for me. Maybe the best way for you is to create a separate blank ionic 3 project and try if you can make super-tabs work in that new blank project.
  2. I have only tried using root with super-tabs, below is an example. <super-tab [root]="YOUR_SUBPAGE" [title]="YOUR_TITLE" [icon]="YOUR_ICON" [badge]="YOUR_BADGE" [rootParams]="PARAMETERS_YOU_WANT_TO_PASS_TO_THE_SUBPAGE">
    Sorry that I’m not sure how to assign multiple subpages within super-tab without [root] attribute.


Hi. I implemented swipeable tabs and it works perfectly.
I’ve tried to use swipeable tabs and ion-refresher and I had to get rid of refresher because the user experience was very bad. When you want to slide it also refrehes the page. How can I solve this?


Rocks. this should be integrated to the default Ionic Component. Good job!