Ionic Hide Tabs

I want to hide tabs bar on a specific page. How can I do that? Thanks

4 Likes

i think tabs are a main navigation element in ionic1 and still in ionic2 if you want to hide them --> refactor your navigation history like:

state base --> ion-nav-view
base.tabs --> contains tab-layout
base.tabs.xxx --> a specific tab

base.noTab --> view without tab

But keep in mind --> by default tabs have their own navigation stack, so maybe you need to manipulate them to fit your aims. But luckily it is possible in ionic2 :smile:

https://adamdbradley.github.io/building-with-ionic2/#/16

2 Likes

I think add a specific tag would be easier. Something like.

<ion-navbar *navbar  hide-tabs>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

But i will try your suggestion. Thank you @bengtler

@adamdbradley
There’s actually two ways to do this. You could either bring up a modal which has it’s own ion-nav inside of it, or set the config *tabSubPages *to true. Material design set’s tabSubPages to true, but iOS does not because that’s their defaults. The tabSubPages config should be in alpha.31.

I was able to successfully hide tab bar on a specific page.

First give an id to the <ion-tabs> component: <ion-tabs id="tabs">

Then handle showing/hiding like this:

@Page(
{
    templateUrl: '...',
})
export class PageWithoutTabBar
{

    constructor()
    {

        this.tabBarElement = document.querySelector('#tabs ion-tabbar-section');

    }

    onPageDidEnter()
    {

        this.tabBarElement.style.display = 'none';

    }

    onPageWillLeave()
    {

        this.tabBarElement.style.display = 'block';

    }

}
7 Likes

this works!, looks better when replaced onPageDidEnter with onPageWillEnter…

Yeah. onPageWillEnter totally makes sense here.

Can you please provide the full code of your solution? It doesn’t work for me still having the tab bar ;/

If you are using ionic 2 beta 11 then you can do it using tabsHideOnSubPages: true this will hide tabs on sub page.

platforms: {
      ios: {
        tabsHideOnSubPages: true
      }
    }
3 Likes

you can simply give a config in app.ts like

ionicBootstrap(MyApp,null, {tabsHideOnSubPages:“true”});

if you want to hide the tabs when navigating to any page.

2 Likes

Yes, it’s working, thank you very much. Just it was not working before beta 11 :wink: Cheers!

its not working broo :confused:

I’ll work on beta 11 only

am working in beta 11… prblm is tha my root page is login page and when successfully login move to tabs page but when i logout from home page and set root page to login page its still display … on hoempage its show nothing all reming page show.:worried: ionicBootstrap(App, { platforms: { android: { tabsPlacement: 'top', tabsHideOnSubPages: true, tabsHighlight: true } } });
image

1 Like

You can still use the document.querySelector("ion-tabbar").style.display = 'none' when you perform logout

error on style… TypeError: Cannot read property ‘style’ of null
and also ionic-tabbar change to ionic-tabs…?

1 Like

I find a solution how to hide ion-tabbar:

document.querySelector("ion-tabbar")['style'].display = 'none';

And if you need show them again:

document.querySelector("ion-tabbar")['style'].display = 'flex';

Hope it helps :slight_smile:

2 Likes

Hi,
The solution worked for the first time, but when I load the same page, with its tabs set to hide, the tabs are visible again.
I use Ionic 2.0.0 RC0 and that’s my code:

ionViewDidEnter() {
    let elem = <HTMLElement>document.querySelector(".tabbar");
    if (elem != null) {
      elem.style.display = 'none';
    }
  }
6 Likes

@behnamazimi did you find a solution?

If no maybe are you facing problem as I do (which explain why document.querySelector doesn’t select the right div)

No, unfortunately I could not find any solution yet.
and Yes, I have the same problem!