Ionic Swipeable Tabs are now here!


Congrats on the great work, hats off to you.
I have one tab with google maps, is it possible to get the slide to work with the map in some good way or should I turn it off for the page.


It’s possible but the feature isn’t implemented at the moment.


That would be a lovely feature to have.


I have an issue with using custom font.

If I use it, it will break the design of tabs (but only on iOS). If I use default font (no custom font is set), everything is working. Below is example what it is doing - White space after last tab, indicator overlaps the tab.

I tried to use custom font on example project of tabs, and it do it too.

Can you please look at it?


EDIT: It is doing when I set scrollTabs… Please help. It is i big bug for me :-/


No one? It is very frustrating… :-/


Share with me a minimal project that reproduces this issue and I’ll have a
look. You can send it via a direct message if you prefer.


Already fixed during trying to find out what is wrong. I set initial CSS to the indicator and now it works correct.
CSS I have added:

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


with super-tab tabIcon is not working. I used ‘icon’ instead. It’s working :slight_smile:


Hey I was wondering if there was a way to set platform specific styling to super tabs in the same way that you can in the
app.module file.

For example, something like:

      platforms: {
        ios: {
          statusbarPadding: true,
        android: {
          tabsPlacement: 'top',
          tabsLayout: 'icon-bottom',
          tabsHighlight: 'true'


this tabs works in Ionic 3?


No, it’s not possible. You will have to do it manually by doing something like this:

  template: '<super-tabs [someConfig]='someConfig'> ... </super-tabs>'
export class MyPage {
  someConfig: any;
  constructor(platform: Platform) { 
    if ('ios')) {
      this.someConfig = 'some value';
    } else {
      this.someConfig = 'some other value';



Yes. In fact the latest version of the module only works with Ionic 3.


I’m not sure if it’s me or something else but I try it but it doesn’t seem very smooth. It doesn’t follow my finger all over the screen. It’s like there is a little lag or the animation stop at some point then it continues. It’s hard to explain with words. I really like this component but I hope the smoothness of the animation would be better.


How could be possible to do something similar to this?

    <super-tab *ngFor="let section of sections" [root]="sectionPage" [rootParams]="section" title="section.title"></super-tab>

I would like to obtain the title of the tab stored in a collection.


Yes, its possible.

You just need to add *ngIf=“sections” on the main super-tabs element. This
makes sure that we’re only rendering the supertabs when your data is ready.


beginner only, is it possible to have ion-tabs and super-tabs at the same time ?

  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>

<super-tabs id="mainTabs" selectedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)" scrollTabs="true">
  <super-tab [root]="tab1Root" title="First page"  id="homeTab"></super-tab>
  <super-tab [root]="tab2Root" title="Second page" id="locationTab"></super-tab>
  <super-tab [root]="tab3Root" title="Third page"  id="favouritesTab"></super-tab>


I’m not sure. I haven’t tested it personally. I remember someone on Github
did test it and it worked for them.


A post was split to a new topic: Super-Tabs: ERROR Error: Uncaught (in promise): invalid views to insert


help help

git clone
cd ionic2-super-tabs-example
git submodule init
git submodule update
npm i
ionic serve

git submodule update outputs like this

Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of ‘’ into submodule path ‘C:/Users/Asus/myFolder/ionic2-super-tabs-example/src/ionic2-super-tabs’ failed


swiping doesn’t work even though I used scrollTabs=“true”

help, need the correct usage of swipe functions enableTabSwipe, enableTabsSwipe and slideTo

the goal: Just want to have the tabs slide-able and swipeable at the same time