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

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:

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 -

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.