CODEWITHSUNDEEP
jquerycssionic-framework
Sinan Samet
Sinan Samet

Reputation: 6752

How do I hide the tabs in Ionic Framework

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

enter image description here

This is what I got so far:

enter image description here

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

Upvotes: 26

Views: 37507

Answers (8)

Wasi
Wasi

Reputation: 21

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

Upvotes: 2

Elroy
Elroy

Reputation: 1670

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>

Upvotes: 1

Alex Pavia
Alex Pavia

Reputation: 101

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).

Upvotes: 10

dotfrank
dotfrank

Reputation: 81

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.

Upvotes: 8

parliament
parliament

Reputation: 22964

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 }">

Upvotes: 2

Dunc
Dunc

Reputation: 18942

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>

Upvotes: 24

Daniel Rochetti
Daniel Rochetti

Reputation: 592

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".

Upvotes: 31

Sly_cardinal
Sly_cardinal

Reputation: 13043

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>

Upvotes: 26

Related Questions