Hello there,
Currently, I am utilizing the following plugin in my Ionic 3 project: https://github.com/zyra/ionic2-super-tabs
The plugin offers a great functionality for swipeable tabs in Ionic applications. In its documentation, it demonstrates how to hide the toolbar (which I have successfully accomplished). Now, my aim is to replace the toolbar with an ion-slides type feature such as the pager, indicating to users that they can swipe left or right to navigate to other pages or tabs.
Below is the code snippet I am currently working with:
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) {
}
}
Moreover, I would like to incorporate a navigation display feature similar to this: https://i.sstatic.net/pZ8YC.png