CODEWITHSUNDEEP
ionic-frameworktabsionic2
Mohit Prakash
Mohit Prakash

Reputation: 3

Hiding Tabs on Sub pages when using ionic2-super-tabs

I am using ionic2-super-tabs and it is working fine. The only problem is I am not able to hide tabbar on subpages, like I used to do when using and setting tabsHideOnSubPages: "True" in app.module.ts

Is there a way to hide tabs on subpages when using ionic2-super-tabs?

Upvotes: 0

Views: 1199

Answers (3)

Tapas Garai
Tapas Garai

Reputation: 21

Add following code on your root pages .ts files. Reference URL https://github.com/zyra/ionic2-super-tabs

Example rootPage1.ts page

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

export class rootPage1 {
constructor(private superTabsCtrl: SuperTabsController){}    
ionViewWillLeave() {
    this.superTabsCtrl.showToolbar(false);
}

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

Upvotes: 1

Rlynx
Rlynx

Reputation: 31

ionic2-super-tabs has a reference to its NavController named as rootNavCtrl which is automatically added to the NavParams of all sub-tabs. This allows you to push pages from the root page rather than the inner one. That way your sub page is pushed on top of the super-tabs page and covers the tabbar.

Assuming your super-tabs page has a tab called Page1Page you can do this...

export class Page1Page {

  rootNavCtrl: NavController;

  constructor(public navParams: NavParams) {
    //get a reference to the NavController of super-tabs
    this.rootNavCtrl = navParams.get('rootNavCtrl'); 
  }

  pushSubPage() {
    //use it to push your new subpage
    this.rootNavCtrl.push('PageToPush');
  }

}

See the example at https://github.com/zyra/ionic2-super-tabs-example/blob/master/src/pages/page1/page1.ts#L22

Upvotes: 3

Mohit Prakash
Mohit Prakash

Reputation: 3

I have done it in the following way

My Tabs.html file has 4 root pages.

In root pages:

this.tabBarElement = document.querySelector('super-tabs-toolbar');

ionViewWillLeave() {
    this.tabBarElement.style.display = 'none';
}

ionViewWillEnter() {
    this.tabBarElement.style.display = 'block';
}

And finally in the supertabs css make height as 100% as by default it sets height as calc(100% - 72px), which pushes the page down, when the tab bar is hidden.

So make the changes as

super-tabs-container { {
    height: calc(100%)! important;
}

Upvotes: 0

Related Questions