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

Daniel's answer was very close (thanks!) but didn't quite work in my case:

1. ng-hide hides the tab content as well as the tabs (for me, anyway)
2. I want to to conditionally hide the tabs by passing an expression to the directive.

So here's my modified template:

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

Directive (again based on Daniel's):

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function(value){
                $rootScope.hideTabs = value;
            });

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

Usage:

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

Answer 2

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 3

Simple CSS override worked for me example in codepen, my requirement was to hide main tabs for child/inner views, e.g popup views + this does not affect secondary tabs:

<style>
    /* hide the main tabs */
    .tab-nav{
        display: none;
    }
    /* this takes care of the access margins bottom or top tabs */
    .has-tabs, .has-tabs-top, .has-tabs-bottom {
        bottom: 0px !important;
        top: 0px !important;
    }   
</style>

OR in directive example:

angular.element(".tab-nav").css("display":"none");

Dont forget:

<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>

Answer 4

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>