How do I hide the tabs in Ionic Framework

Question

I chose the ionic tab view so I can use the templating system but I can\'t remove the tabs. I want a view like this and I did manage to remove the header bar but I cant remo

Answer 1

Unfortunately the current answers have a lag before showing the tabs again. It seems the $scope gets $destroyed a bit late and when you go to a page that should have tabs, there's a lag before they're reshown. However, paul's link brought me to a better solution which has no lag:

app.controller('applicationController', function ($state, $rootScope) {  

    var hideTabsStates = ['tab.inbox-convo']; 

    $rootScope.$on('$ionicView.beforeEnter', function () {
        $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
    });
});

<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">

Answer 2

Ng-if has been the only directive that has worked for me.

ng-if="$root.showList"

Hope it helps.

Answer 3

I used dotfrank's answer and it worked like a charm, except for when I went a few layers deep in a specific tab's view and then used the back button. Going back to a view that has the directive "hideTabs = 'true'" will actually have it set to "false" unless you wrap the $watch on hideTabs in the $ionicView.beforeEnter event.

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

Hope this helps! (also, this is my first answer... so if I'm completely missing something, then forgive my noobness).

Answer 4

Dunc's answer is very good, but does not work the best when it comes to Ionic's view caching.

The $destroy event is used which will set the $rootScope variable when the parent view is torn down.

However, as others have commented, this $destroy event happens too late when returning to a page that needs tabs. This causes a delayed jumpy behavior on page transitions. Additionally, the ion-content .has-tabs class does not get added until after the delay, so any content is covered by the tabs as well.

Instead we should reset on the Ionic event beforeLeave, to ensure the transition's digest cycle gets the variable change in time.

Same template:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs --> 
</ion-tabs>

Directive (again based on Dunc's):

.directive('hideTabs', function($rootScope) {
  return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          scope.$watch(attributes.hideTabs, function(value){
              $rootScope.hideTabs = value;
          });

          scope.$on('$ionicView.beforeLeave', function() {
              $rootScope.hideTabs = false;
          });
      }
  };
});

Usage is the same -

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

For a bonus, if you're using SASS, you can get a nice popup transition for your tab bar if you add this to your .scss file:

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

If using vanilla CSS, replace $tabs-height with the height of your bar.

Answer 5

https://github.com/driftyco/ionic/issues/395 It appears that the tabs are kind tricky in Ionic. Check the link, it worked great for me

Answer 6

You need to simply put a simple code in page controller like this.

angular
   .module('app.module')
   .controller('pageController', function ($scope, $rootScope, $state, $ionicTabsDelegate) {
    /* hide tabs on page show */
    /* 0 = hide, 1 = show */
    $scope.$on('$ionicView.enter', function() {
        $ionicTabsDelegate.showBar(0);
    });
});

Fugital.com