How can I replace ionic2-super-tabs Toolbar with ion-slides pager function

Question

Good day,

I'm currently using the following plugin for my ionic 3 project: https://github.com/zyra/ionic2-super-tabs

This plugin offers a nice feature for swipeable tabs in Ionic apps. Within the documentation it shows how to hide the toolbar (which I've successfully managed to do). Now I want to be able to replace the toolbar with an ion-slides type feature like the pager to show the user that they can swipe left or right to access the other pages or rather in this case, tabs.

Here is my current code:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

import { TabsPage } from '../tabs/tabs';

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

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

  }

  welcomePage() {
    this.navCtrl.push(TabsPage,{index: "1"})
  }

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

}

tabs.ts

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { MyPage } from '../my/my';
import { WelcomePage } from '../welcome/welcome';
import { SettingsPage } from '../settings/settings';

@Component({
  templateUrl: 'tabs.html',
})
export class TabsPage {

  index = this.navParams.get('index')
  tab1Root = SettingsPage;
  tab2Root = WelcomePage;
  tab3Root = MyPage;

  constructor(public navParams: NavParams) {

    }


}

tabs.html

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { MyPage } from '../my/my';
import { WelcomePage } from '../welcome/welcome';
import { SettingsPage } from '../settings/settings';

@Component({
  templateUrl: 'tabs.html',
})
export class TabsPage {

  index = this.navParams.get('index')
  tab1Root = SettingsPage;
  tab2Root = WelcomePage;
  tab3Root = MyPage;

  constructor(public navParams: NavParams) {

    }


}

And this is the feature I would like to have to show navigation:

Answer 1

You can add a custom element in the page that contains the <super-tabs> element.

Here's a quick example, modify as needed, keep in mind I didn't test this:

HTML

  <super-tabs (tabSelect)="onTabSelect($event)" ...>
    ...
  </super-tabs>
  <div class="pager">
    <span class="pager-dot" [class.selected]="selectedTabIndex === 0"></span>
    <span class="pager-dot" [class.selected]="selectedTabIndex === 1"></span>
    <span class="pager-dot" [class.selected]="selectedTabIndex === 2"></span>
  </div>

TypeScript

@Component( ... )
export class MyPage {
  // set it to the default selected tab
  selectedTabIndex: number = 0;
  onTabSelect(ev: any) {
    // forgot what this event passes, but I think the "ev" object has an "index" property
     this.selectedTabIndex = ev.index;
  }
}

SCSS

.pager {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 15px;
  span.pager-dot {
    display: inline-block; // so we can set height + width to a span element
    width: 10px;
    height: 10px;
    border-radius: 500rem; // make it round
    transition: all .3s linear; // make size transition smooth

    &.selected {
      width: 15px;
      height: 15px;
    }
  }
}