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 remove the tabs bar

This is what I got so far:

If I hide the tabs bar (ion-tabs{display:none}) it also removes the content, which is not what I want.

Answer 1

I know that this is answered already, but there's a more "angular way" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.

My solution to this on my app was:

1 - Use ng-hide binded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - Apply it to specific views that don't need the tab bar visible:

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

ps: I think this can be improved even further avoiding the need of the ng-hide on the <ion-tabs> declaration, letting the directive do all the "dirty work".

Answer 2

Have a look at the Ionic tab documentation:

To hide the tabbar but still show the content, add the "tabs-item-hide" class.

So you would change this:

<div class="tabs">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

to this:

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>