Reputation: 6752
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.
Upvotes: 26
Views: 37507
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);
});
});
Upvotes: 2
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
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
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
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
Reputation: 18942
Daniel's answer was very close (thanks!) but didn't quite work in my case:
ng-hide
hides the tab content as well as the tabs (for me, anyway)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
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
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