Swipeable Tabs Navigation With Ionic [v3]

17 Shares

Swipeable Tabs is type of Tabs where users can swipe between the tabs of your app, something you might know from various apps like Instagram. It’s not easy possible with the standard Ionic components, but we can use a great package to achieve the desired behavior even with additional features.

In this Quick Win we will use the Super Tabs Module to build an Ionic app with 3 tabs and logic for navigating around in our app that might be common use cases for your project.

Our final app will work and look like in the gif below!

Starting Our App

We start with a blank Ionic app, install the Super tabs and also add a bunch of additional pages for our apps structure, so go ahead and run:

ionic start swipeableTabs blank
cd swipeableTabs
npm i ionic2-super-tabs@4.1.4
ionic g page home
ionic g page news
ionic g page about
ionic g page account
ionic g page newsDetails

ionic start swipeableTabs blank

cd swipeableTabs

npm i ionic2-super-tabs@4.1.4

ionic g page home

ionic g page news

ionic g page about

ionic g page account

ionic g page newsDetails

For me the version 4.1.5 was not working as expected therefore I decided to use the previous version which should work without any problems for you!

To make use of the package we need to add it to the root module of our app so go ahead and change your app/app.module.ts to:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    SuperTabsModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

SuperTabsModule.forRoot()

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Now you can add the tabs wherever you want inside your app!

Creating the Super Tabs Structure

We will create the basic template for the tabs inside our home page, therefore we also need to import the module to the module file inside pages/home.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    SuperTabsModule
  ],
})
export class HomePageModule {}

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { HomePage } from './home';

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({

declarations: [

HomePage,

imports: [

IonicPageModule.forChild(HomePage),

SuperTabsModule

})

export class HomePageModule {}

Our app will have 3 tabs and if you want to keep it generic, it’s a good idea to add all information to an array of pages which we can then use inside the view.

We also want to catch the event when users change the tab. This can be important if you want to restrict access to tabs because users might need to login first!

In our example we simply display an alert and either change the page to the desired one or go back. If you have authentication in place this would be the spot to make your checks. Also we keep track of the active tab to display the correct title of the view at the top of the app as the title element is inside this root view.

Go ahead and change your pages/home/home.ts to this:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SuperTabs } from 'ionic2-super-tabs';
import { AlertController } from 'ionic-angular/components/alert/alert-controller';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  pages = [
    { pageName: 'NewsPage', title: 'News', icon: 'flame', id: 'newsTab'},
    { pageName: 'AboutPage', title: 'About', icon: 'help-circle', id: 'aboutTab'},
    { pageName: 'AccountPage', title: 'Body', icon: 'body', id: 'accountTab'}
  ];

  selectedTab = 0;

  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController) { }

  onTabSelect(ev: any) {
    if (ev.index === 2) {
      let alert = this.alertCtrl.create({
        title: 'Secret Page',
        message: 'Are you sure you want to access that page?',
        buttons: [
          {
            text: 'No',
            handler: () => {
              this.superTabs.slideTo(this.selectedTab);
            }
          }, {
            text: 'Yes',
            handler: () => {
              this.selectedTab = ev.index;
            }
          }
        ]
      });
      alert.present();
    } else {
      this.selectedTab = ev.index;
      this.superTabs.clearBadge(this.pages[ev.index].id);
    }
  }

}

import { Component, ViewChild } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { SuperTabs } from 'ionic2-super-tabs';

import { AlertController } from 'ionic-angular/components/alert/alert-controller';

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html',

})

export class HomePage {

pages = [

{ pageName: 'NewsPage', title: 'News', icon: 'flame', id: 'newsTab'},

{ pageName: 'AboutPage', title: 'About', icon: 'help-circle', id: 'aboutTab'},

{ pageName: 'AccountPage', title: 'Body', icon: 'body', id: 'accountTab'}

];

selectedTab = 0;

@ViewChild(SuperTabs) superTabs: SuperTabs;

constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController) { }

onTabSelect(ev: any) {

if (ev.index === 2) {

let alert = this.alertCtrl.create({

title: 'Secret Page',

message: 'Are you sure you want to access that page?',

buttons: [

{

text: 'No',

handler: () => {

this.superTabs.slideTo(this.selectedTab);

}

}, {

text: 'Yes',

handler: () => {

this.selectedTab = ev.index;

}

]

});

alert.present();

} else {

this.selectedTab = ev.index;

this.superTabs.clearBadge(this.pages[ev.index].id);

}

To finally display our tabs we need to add the according super tabs element and add the tabs inside it by iterating over the array we created previously. You can add various elements like the position of the tab bar, the color of the different sections and also subscribe to the event emitted by the tab bar.

If you want to display the tabs at the top like we do make sure you add the no-border directive to your header as this will result in a clean UI.

At the top we also display the name of the currently selected Tab, we could also leave this out and instead display names on the tabs but that’s up to your implementation. Now change your pages/home/home.html to:

<ion-header no-border>

  <ion-navbar color="secondary">
    <ion-title>{{ pages[selectedTab].title }}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

  <super-tabs tabsPlacement="top" toolbarBackground="secondary" toolbarColor="light" indicatorColor="light"
  (tabSelect)="onTabSelect($event)">
  <super-tab *ngFor="let page of pages" [root]="page.pageName" [icon]="page.icon" [id]="page.id"></super-tab>
</super-tabs>

</ion-content>

<ion-header no-border>

<ion-navbar color="secondary">

<ion-title>{{ pages[selectedTab].title }}</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<super-tabs tabsPlacement="top" toolbarBackground="secondary" toolbarColor="light" indicatorColor="light"

(tabSelect)="onTabSelect($event)">

<super-tab *ngFor="let page of pages" [root]="page.pageName" [icon]="page.icon" [id]="page.id"></super-tab>

</super-tabs>

</ion-content>

Your app will work now but you will notice that each page this has its own header. Therefore, make sure to remove the area from your NewsPage, AboutPage and AccountPage!

Using the Super Tabs Controller

Besides the general functionality there is a SuperTabsController we can use to change the appearance of the tab bar or to perform different actions. This controller can be injected anywhere and will either access the SuperTabs by the id or just use the first one inside your app. As we only got this one bar we don’t need the id in this case.

To try out some of the functions open your pages/news/news.html and add these buttons and actions:

<ion-content padding>
  <button ion-button full (click)="goToDetails()">Open Details</button>
  <button ion-button full (click)="setBadge()">Set Badge</button>
  <button ion-button full (click)="clearBadge()">Clear Badge</button>
  <button ion-button full (click)="jumpToAccount()">Go to Account</button>

  <button ion-button full (click)="hideToolbar()">Hide Toolbar</button>
  <button ion-button full (click)="showToolbar()">Show Toolbar</button>
</ion-content>

<ion-content padding>

<button ion-button full (click)="goToDetails()">Open Details</button>

<button ion-button full (click)="setBadge()">Set Badge</button>

<button ion-button full (click)="clearBadge()">Clear Badge</button>

<button ion-button full (click)="jumpToAccount()">Go to Account</button>

<button ion-button full (click)="hideToolbar()">Hide Toolbar</button>

<button ion-button full (click)="showToolbar()">Show Toolbar</button>

</ion-content>

Finally we need to add the controller and call a few of the functions to set a Badge on a specific tab or to change tabs through code. There’s a lot you can do, simply check out the documentation for more information.

For now, open your pages/news/news.ts and change it to:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SuperTabsController } from 'ionic2-super-tabs';

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {
  rootNavCtrl: NavController;

  constructor(public navCtrl: NavController, public navParams: NavParams, private superTabsCtrl: SuperTabsController) {
    this.rootNavCtrl = this.navParams.get('rootNavCtrl');
  }

  goToDetails() {
    this.rootNavCtrl.push('NewsDetailsPage');
  }

  setBadge() {
    this.superTabsCtrl.setBadge('aboutTab', 9);
  }

  clearBadge() {
    this.superTabsCtrl.clearBadge('aboutTab');
  }

  jumpToAccount() {
    this.superTabsCtrl.slideTo(2);
  }

  hideToolbar() {
    this.superTabsCtrl.showToolbar(false);
  }

  showToolbar() {
    this.superTabsCtrl.showToolbar(true);
  }
}

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { SuperTabsController } from 'ionic2-super-tabs';

@IonicPage()

@Component({

selector: 'page-news',

templateUrl: 'news.html',

})

export class NewsPage {

rootNavCtrl: NavController;

constructor(public navCtrl: NavController, public navParams: NavParams, private superTabsCtrl: SuperTabsController) {

this.rootNavCtrl = this.navParams.get('rootNavCtrl');

}

goToDetails() {

this.rootNavCtrl.push('NewsDetailsPage');

}

setBadge() {

this.superTabsCtrl.setBadge('aboutTab', 9);

}

clearBadge() {

this.superTabsCtrl.clearBadge('aboutTab');

}

jumpToAccount() {

this.superTabsCtrl.slideTo(2);

}

hideToolbar() {

this.superTabsCtrl.showToolbar(false);

}

showToolbar() {

this.superTabsCtrl.showToolbar(true);

}

You might notice that we use a rootNavCtrl for pushing new pages: This is needed if you want your child pages to take the full view!

The controller is added to the navParams by the Super Tabs and we can use it like the standard Navigation Controller. Of course if you want to stay inside the tabs interface you don’t need this but sometimes leaving the interface for more space makes sense.

Further Notes

If your app also has a side menu you might need to add an additional config element to your Super Tabs lie this:

<super tabs [config]="{ sideMenu: 'left' }">

1	<super tabs [config]="{ sideMenu: 'left' }">

Besides that setting you could also change the drag distance and threshold but the tabs are in general configured to work pretty well out of the box.

Now enjoy your even more native app with the swipeable tabs!

You can also find a video version of this Quick Win below.