Ionic Hide Tabs

#1

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

4 Likes
How do clear tab in tabs-page
#2

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
#3

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

#4

@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.

Ionic 2 navigation question
#5

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
#6

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

#7

Yeah. onPageWillEnter totally makes sense here.

#8

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

#9

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
#11

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
#12

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

#13

its not working broo :confused:

#14

I’ll work on beta 11 only

#15

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 } } });

1 Like
#16

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

#17

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

1 Like
#19

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:

1 Like
Hide Ionic tabs and Toolbar on botton click [Ionic 4.0.0]
#20

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';
    }
  }
5 Likes
#22

@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)

#23

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