Ionic Hide Tabs

Ionic Framework ionic-v3
24

Thx for the feedback. Kind of happy to hear it, spent so many hours on that today…hope the github issue gonna brings something

25

not good. it’s working, but… when I go back Tabs also hidden

26

@nganngan @behnamazimi guyz, till there is a proper fix, I extended your script @behnamazimi like following. Even if many ion-tabs bar exists in the dom, all gonna be set as hidden. That makes the tricks for me.

let elements = document.querySelectorAll(".tabbar");

    if (elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.display = 'none';
        });
    }
11 Likes
27

Thanks a lot!
that’s it

1 Like
28

This is definitely a hack, but it looks nice. I would create a directive for this at some point. You should adjust the lifecycle events to taste/feel depending on how you want the transition to look.

ionViewWillEnter() {
    let tabs = document.querySelectorAll('.tabbar');
    if ( tabs !== null ) {
      Object.keys(tabs).map((key) => {
        tabs[ key ].style.transform = 'translateY(56px)';
      });
    } // end if
  }

  ionViewDidLeave() {
    let tabs = document.querySelectorAll('.tabbar');
    if ( tabs !== null ) {
      Object.keys(tabs).map((key) => {
        tabs[ key ].style.transform = 'translateY(0)';
      });
    } // end if
  }
5 Likes
29

I quite like your solution with translate instead of display:hide @mt__ (sometimes my content was trimmed and I had to add padding, thx)

You’re right that it’s quite an ugly hack, but didn’t find any better solutions. If you or anyone has a better idea, it will be most welcomed :slight_smile:

30

When I use this code, it hide the tabs bar but when I go back to the previous page, how can i get the tab bar back?

31

You can do something like following:

private displayTab(display:boolean) {
    let elements = document.querySelectorAll(".tabbar");

    if (elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.transform = display ? 'translateY(0)' : 'translateY(56px)';
        });
    }
}

But as noticed here, quite hacky, still not testing and finding a proper solution…but for the moment…

1 Like
32

I am very new with Ionic(2). The code works for me, I test it with buttons event. But when I the function in the constructor part it doesn’t start the function again when I come back to the page with the back function.

Ionic 1 has a function like:

$scope.$on("$ionicView.enter", function(event, data){
   this.displayTab(true);
});
33

you are maybe looking for ionViewWillEnter() or ionViewDidEnter()

1 Like
34

Guyz, with that hack I was facing the following error debugging in Xcode (was still working but let a trace in the console):

Unhandled Promise rejection: Attempted to assign to readonly property.

So I modified it like following, just in case you run into the same thing:

private displayTab(display:boolean) {
    var elements:NodeListOf<Element> = document.querySelectorAll(".tabbar");

    this.transformTab(elements, display).then(() => {
        // Do nothing, alright
    })
}

private transformTab(elements:NodeListOf<Element>, display:boolean):Promise<{}> {
    return new Promise((resolve) => {
        if (elements != null) {
            for (let i:number=0; i<elements.length; i++) {
                (<HTMLElement> elements[i]).style.transform = display ? 'translateY(0)' : 'translateY(56px)';
            }

            resolve();
        }
    });
}
35

I had been using this code to hide the tab bar on certain pages (landing, login, register), but displaying the tabs when logged in. However, after upgrading recently, I am not getting typescript errors.
Property 'style' does not exist on type 'Element'. I have tried different types on the variables like HTMLDivElement or HTMLElement and a few others. The code appears to work correctly when run in the browser, but the CLI is showing the transpile error.

36

Did you cast your variable as the code displayed above?

(<HTMLElement> yourElement).style....
1 Like
37

Thank you so much @reedrichards. It was the () that I had omitted from my code when doing the type casting. Adding those parenthesis around it worked perfectly.

1 Like
38

I like this. I made one small modification: ionViewWillLeave instead of ionViewDidLeave

1 Like
39

I have created a quick little directive that I just throw onto ion-content on a view I want to be sure will not show the tab bar. Be aware that this ignores/overrides a lot of default functionality…

40

The hide using the query selector works even when navigating to other pages and going back to the page where the tab was hidden. But, this does not work after logging out of the page. The tab returns back. this.appCtrl.getRootNav().push(LoginPage);

How can I still hide the tabs even I logged in again the second time around?

41

@xiandalisay, I would try clearing your nav stack before changing anything else.

However, my solution is as follows:

42

Thanks! That did the trick! :slight_smile:

43

Hi buddy, I’m trying to implement your solution, but is show me this error message:

Property ‘tabBarElement’ does not exist on type