Tabs nested inside main app

1

This used to be a big question when Ionic first came out. I don’t know if it was every really answered. How can you have a tab nested inside the rest of your app and keep the app’s Navbar?

Right now, if you put a tab state inside another view, the tabs header takes over the navbar, you can’t go back, and you don’t get navigation animation between the first state and the tab state.

Example Code Pen : http://codepen.io/calendee/pen/emNgrq

On the first page, click the Go To Tabs Home button. Once inside the tabs view, you can’t get back into the main app.

UPDATE : I have a possible solution. The key is to NOT use <ion-nav-view> within the tabs. Instead, just use the Angular ui-router ui-view. In addition, the view that has the tab definition also needs to include an <ion-nav-bar>.

PITFALLS : There’s an ugly flash when navigating into this tab state. I wish that could be cleaned up.

UPDATE 2 : On my local version of an app, I don’t need the additional ion-nav-bar and I don’t get the ugly flash.

UPDATE 3 : There are all kinds of pitfalls to this approach. You don’t get any of the new $ionicView.X events for example. I guess I can’t recommend this approach.

Sample : http://codepen.io/calendee/pen/QwbpbR?editors=101

So instead of this:

<ion-tabs class="tabs-icon-top tabs-positive">

  <ion-tab title="Home" icon="ion-home" ui-sref="app.tabs.home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios7-information" ui-sref="app.tabs.about">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

You do this :

<ion-tabs class="tabs-icon-top tabs-stable">

  <ion-tab title="Home" icon="ion-home" ui-sref="app.tabs.home">
    <div ui-view="home-tab"></div>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios7-information" ui-sref="app.tabs.about">
    <div ui-view="about-tab"></div>
  </ion-tab>

</ion-tabs>

UPDATE 4 : This is how I finally ended up doing this: http://codepen.io/calendee/pen/raOgYG

1 Like