Feature: Ability to hide tab bar

[sicsol]

There might be a case where someone would like to hide the tab bar.

One instance i can think of is when the user focuses on any input element the screen shrinks to accommodate the keyboard and this causes the tab bar to be docked at the top of the keyboard.

[sicsol]

Just wondering if there are any thoughts on adding this functionality.

[ajoslin]

Hey @sicsol, thanks for your patience. it's coming - but with some API changes. Expect it soon(:tm:)

[ajoslin]

put an ng-if on ion-tabs, done!

[ajoslin]

Wait nevermind, that won't work. Needs to be done, could be easy.

[ajoslin]

http://ionicframework.com/docs/components#tabs

[sicsol]

@ajoslin thanks

[wedgybo]

I think I'm being daft here, but how do you apply this tabs-item-hide when you use the following markup for generating the tab bar.

<ion-tabs class="tabs-icon-top">
    <ion-tab title="Saved" icon="icon ion-ios7-heart-outline" href="#/saved">
        <ion-nav-view name="tab-saved" class="slide-left-right"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Discovery" icon="icon ion-ios7-cart-outline" href="#/products">
        <ion-nav-view name="tab-products" class="slide-left-right"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Account" icon="icon ion-ios7-gear-outline" href="#/account">
        <ion-nav-view name="tab-account" class="slide-left-right"></ion-nav-view>
    </ion-tab>
</ion-tabs>

It appears like the class should be added to the transcluded div generated by <ion-tabs> as placing it at the top level wipes out all the tabs and the pane div.

It also feels like there should be some way to control this through $ionicTabsDelegate

Can anyone tell me if I'm missing something here?

[ucay]

I found the same problem with @wedgybo
There's no tabs-item-hide attribute for <ion-tab></ion-tab> directive
May I missing something ?

[calendee]

@ucay : Some people actually want a tabs like view with no tabbar or hide the tabbar for a specific reason for a short period of time. Hence this feature was added.

If you want to hide an INDIVIDUAL tab, see this feature request #1666.

[spwizard]

Im looking to do the same I need to hide the tab on my detail pages. I just don't see where this needs to live if you start a project from the tabs template 'tabs-item-hide'

[ucay]

@calendee : that's cool stuff, thanks.

[steefaan]

I'm not sure if it's a bug so I will explain my issue here first. If it should be a programming issue I will create a thread in the ionic forum. Please take a look to codepen http://codepen.io/anon/pen/myEQPv

I highlighted the content area red to have a better overview about the issue. The explanation to hide tabs but show the content on http://ionicframework.com/docs/components/#tabs tells me to add the tabs-item-hide to <ion-tabs></ion-tabs>. If I want to show tabs on a page I need to add the class has-tabs-top to the <ion-content></ion-content> element. I did exactly the same in the codepen.

The problem is that tabs-item-hide will always hide the tabs, also if I add the class has-tabs-top to the <ion-content></ion-content> element. But if I add has-tabs-top I will get only a white background while the tabs itself are hidden.

[xiaofuai]

@php-engineer @kekobin great job, thanks a lot.

[adamelevate]

@php-engineer and @kekobin , 100 points to Gryffindor.

[kfatehi]

Thank you @php-engineer and @kekobin - works great

[LTroya]

Thank you @php-engineer and @kekobin. It helps me a lot!

[bodinaren]

I'm using the same solution as above. I'm still curious however why $ionicTabDelegate doesn't have a .show([show]) function to toggle visibility. Seems like a much easier approach.

[joevo2]

Does the ionic tab have animation? can it hide gracefully? like lowering down or something 😄 @steefaan solution works great 😄

[takayuky]

I'm with @bodinaren. If we can use $ionicTabDelegate.show(boolean) function, managing a tab bar would be much easier.

By the way, though @steefaan's solution works well, a solution which I found at a stackoverflow page below would be more "Angular way."
http://stackoverflow.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework

////// tabs.html
<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">
    // --> your tabs here
</ion-tabs>

////// somewhere_you_wanna_hide_tabbar.html
<ion-view hide-tabs>
  // --> your contents
</ion-view>

////// directives.js
.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

I hope this helps you guys :)

[bodinaren]

@takayukisakai: I like it. I'd suggest an improvement to that code to handle caching tho:

.directive('hideTabs', function($rootScope) {
  return {
    restrict: 'A',
    link: function($scope, $el) {
      $scope.$on("$ionicView.enter", function () {
        $rootScope.hideTabs = true;
      });
      $scope.$on("$ionicView.leave", function () {
        $rootScope.hideTabs = false;
      });
    }
  };
})

I also played around with adding it to the $ionicTabsDelegate and came up with this. What do you guys think? https://github.com/bodinaren/ionic/commit/d555f694e3b4693018e0237d0debc0bfeb1d06f3

[takayuky]

@bodinaren: Thank you for giving your solution.
But unfortunately, your code doesn't work in ionic official sample with tab navigations. You might able to see how come it doesn't work, in my CodePen page below.
http://codepen.io/TakayukiSakai/pen/yNxQYZ?editors=101

The chat detail page's template has "hide-tabs" attribute. So it should hide the tab bar, but it doesn't.

Apparently, both $ionicView.enter and $ionicView.leave are called every time you enter the chat detail page (you can see it on your browser console).

[takayuky]

@bodinaren
I made a pull request (#4133) in which I implemented $ionicTabsDelegate.showTabBar(bool) method.

How do you guys think about this method?

[bodinaren]

@takayukisakai Yeah, just remove the $parent. Guess I added it wrong when I tried it. The updated code works now.

Also, about your fork. It looks a lot like my fork I just linked in my last post, but mine had more separation of concerns and I think more like the rest of Ionic works (with also returning current status). Also your docs is wrong. Here's mine (I didn't make a PR yet): https://github.com/bodinaren/ionic/commit/d555f694e3b4693018e0237d0debc0bfeb1d06f3

[takayuky]

@bodinaren: Great! Your code works pretty well after removing $parent.

Sorry I didn't notice your commit posted on your comment. I checked your commit just now, and I thought it worths making PR.

[polunzh]

@takayukisakai Thanks a lot,great solution!

[UrVerySpecial]

1

[EduMiada]

@takayukisakai san great solution, I´ve spent the whole afternoon trying to figure out a solution. Thanks for sharing.

[WilsonFpz]

@takayukisakai
sir, I had fork you codepen, and add hide-tabs directive to 'tab.chats' status,
but the tabs show when entering to 'tab.chat-detail'. really weird _"
http://codepen.io/WilsonFpz/pen/megwxR?editors=101
Could you help on it ? Thanks!

[elroyshilling]

CSS override worked for me, posted my answer on stackoverflow

[mohamed-ahmed]

@ajoslin have you actually be able to use hide-tabs. If so how is it used? I see a lot of people asking about it here and not really any answers.

[mlynch]

This feature was recently added for 1.2: 7dd620d#diff-8abac3f87d0ad8499e65128ece9dfd71R60

[mohamed-ahmed]

Thanks for the update @mlynch

[pietromarrone]

I forked the @takayukisakai codepen, using the ionic 1.3.0 version with the new $ionicTabsDelegate.showBarmethod, the solution can be more elegant.
It remove indeed the ng-class="{'tabs-item-hide': $root.hideTabs} from the ion-tab
Here the codepen: http://codepen.io/pietromarrone/pen/vGPOWQ?editors=101

[bklups]

@pietromarrone I try your codepen, but suppose we have a third level of navigation (after chat-detail.html), we'll call it chat-detail-more.html. Your code works fine, but if we use back button to go back to chat-detail.html, tabs bar comes back
Any idea to hide tabs bar in this case ?

[pietromarrone]

Actually I just extended another sample and both has that problem. No I
didn't fine a way, but it is something regarding the async of state entered
and exited of previous page.

Il Ven 5 Ago 2016 18:17 Benjamin Klups [email protected] ha
scritto:

@pietromarrone https://github.com/pietromarrone I try your codepen, but
suppose we have a third level of navigation (after chat-detail.html),
we'll call it chat-detail-more.html. Your code works fine, but if we use
back button to go back to chat-detail.html, tabs bar comes back
Any idea to hide tabs bar in this case ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#395 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABNE1oORfl5gi0HIURSujzY1hT8b38WBks5qc2IfgaJpZM4BZC47
.

[Hanslen]

@ajoslin Thanks a lot!

[Jatapiaro]

If your problem is on android, this could help you. In the ionic config.xml, add the following lines in the platform name="android" tag.

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge"    target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

This will prevent the keyboard to push up everything and simple overlay the keyboard on the content. So the behaviour will be the same or similar to the ios keyboard

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.