Hiding tabs and manging states in ionic framework

ionic-v1
1

I am trying to make an application using ionic tabs and using this code as the foundation:

However, I prefer to keep the ion-tabs only for the first state of each tab and not for the subsequent states (just like the flipboard app). Basically resulting in something like this:

Someone please help me on that.

2

ng-hide/ng-if or some clever CSS stuff?

3

Hi,

If you want to hide the tabs bar when you go, for example, on a detail view, you can simply define your detail view without be a child of the tabs bar.

In your example http://codepen.io/ionic/pen/odqCz4

in JS change line 44 :

.state('tabs.navstack', {
  url: "/navstack",
  views: {
    'about-tab': {
      templateUrl: "templates/nav-stack.html"
    }
  }
})

to

.state('navstack', {
  url: "/navstack",
  templateUrl: "templates/nav-stack.html"
})

and in your html change line 90 :

href="#/tab/navstack"

to

href="#/navstack"

or use ui-sref (because its more powerfull with states i think :smiley: )

ui-sref="navstack"

Under the hood you define the detail view (the navstack in this case) to be an simple view without the abstract parent state “tab”. So when you go on the about tab and click on the button “tabs nav stack” you have the view without the tabs bar. :slight_smile:

1 Like
4

Cool, does the view/navigation history then still work correctly?

I’m considering doing something like this in my app too, agree that when you’re in a child view there is no need to see the tabs.

5

I’ve already tried doing that but that doesn’t help me with storing ionic history.
If there can be any better solution for this?

6

From my experience the navigation history still work correctly but when you pass from tabs views to detail views the history start a new one. So if you go from a detail view to another detail view, you will have the back button for navigating. If you want a back button for going back from the first detail view to the main tabs view, you must inject manualy a nav back button, this is the default of this tehcnique.

7

Is there any option to continue with the same view but just hide the ion tabs?

8

In this case i guess you must use css for hiding all tabs class, but its a turnaround…

9

That’s what I meant, the nav history won’t work correctly anymore if you don’t nest it under the abstract parent state …

10

Set ng-show"anyname" in your view for a section and then in controller use $scope.show=true or fasle.

11

I do the same thing for a project. I have use a ng-class on the tab bar. I created a css class hideTabBar, and then apply it on the detail viewa. In order for this to work, you have to do this in your app.js where you usually will find your app.run(). Yiu will need to inject $rootScope and $location. Then use $rootScope.on (’$ionViewBeforeEnter’) then apply the class for the necessary routes inside of that using $rootScope.hideTabBar = true;

You will still maintain navigation history as you are only hiding the tab bar rather than removing it. So just keep your tab name in your route as you had it originally.

12

Thanks to all who replied.
Although these options work pretty well but I’ve found another one which seems easier to understand and implement. Instead of using ng-class or ng-show and injecting $rootscope and $location, we can make use of Ionic’s ‘hidden’ option on each ion-tab like this:

the variable ‘Object.hidden’ can be initiated by a boolean ‘false’ in the tabs controller and can be modified by subsequent child controllers, which by default, share the parent scope.