Sub header navigation?

ionic-v1
1

This question relates, but does not do what i want to achieve:

So, in the documentation of the striped style tabs here:

I would like to use the TOP section for one of my tabbed pages (so other pages do not have this).
I do not want to use a buttonbar. However, it is entirely unclear how to achieve this.

Since the way to work with tabs is like this:

<ion-tabs class="tabs-icon-top tabs-positive">
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
  ...more ion-tab 's
</ion-tabs>

Where do we put the ion-nav-view in the striped style tabs?

<div class="tabs-striped tabs-top tabs-background-positive tabs-light">
   <div class="tabs">
    <a class="tab-item active" href="#/tab/shop/actions">
      <i class="icon ion-home"></i>
      Test
    </a>
    <a class="tab-item" href="#/tab/shop/events">
      <i class="icon ion-star"></i>
      Favorites
    </a>
    <a class="tab-item" href="#/tab/shop/about">
      <i class="icon ion-gear-a"></i>
      Settings
    </a>
  </div>
</div>

Actually, i can not find any documentation on proper subnavigation at all.
For example, if

tab.shop

is one main application tab, and that tab’s page has 3 subviews, what would the state be?

tab.shop.subview1?

or should it just be:

tab.subview1?

The same goes for routing, should subview routes be nested or not? should a subview url be

/shop/actions

or just

/actions

For me it’s quite note clear how Ionic approaches this…

[edit 1] My problem for now is solved using a button bar, but this is not how i’d like to solve this.
[edit 2] I’ve found a codepen that illustrates what i want, so i think ican reverse engineer it. http://codepen.io/calendee/pen/LvxGr/ Still weird that this sort of trivial navigation stuff is not documented at all.

[edit 3] So it seems that states do need to be nested, but URL’s do not.

2

This should be a good starting point.

3

Thanks @mhartington.
I’m still having trouble to grasp how the HTML / JS structure for nested tabs would look like, taking into account angulars abstract states. I mean the situation when there is both a bottombar and a topbar, but i think your example will help me in the right direction already.

Can anyone please elaborate this:

In the example @mhartington gives (and most Ionic examples) the main (tab) navigation is loaded AS a view,
as a template. It is not hardcoded in index.html like in the following example, and yet it works. Even navigation history is preserved. http://codepen.io/calendee/pen/LvxGr/?editors=101
Why then load the main tab navigation as an abstract state?

Thanks.

4

After not being able to spend time on this project, I return to find that I am still unable to do what i want:

a tab interface application with sub tabs, like http://codepen.io/calendee/pen/LvxGr/?editors=101
However in the example above, the main nav is built inside the index.html (it does not use a ‘main’ /tab abstract state which contains all app tabs. all app tabs are thus effectively ‘root’ states).
This saves one level of hierarchy, thus enabling the default abstract state to be used as a subtab effectively.

I’m beginning to think that this is the only way to do sub tabs properly in Ionic, as i can not for the life of me find out how to do it with the default approach of having all main tabs as a substate of an abstract /tab state.

TL;DR; this is what i want to achieve:

/tab (abstract)
 +-- main tab 1
 +-- main tab 2
       +-- sub tab a
       +-- sub tab b
       +-- sub tab c
 +-- main tab 3
 +-- main tab 4

And i have no idea if it should look like this (documentation, anyone?):

/tab (abstract)
 +-- main tab 1
 +-- main tab 2
       +-- /subtab (abstract)
            +-- sub tab a
            +-- sub tab b
            +-- sub tab c
 +-- main tab 3
 +-- main tab 4

or maybe like this?

/tab (abstract)
 +-- main tab 1
 +-- main tab 2
 +-- /subtab (abstract)
      +-- sub tab a
      +-- sub tab b
      +-- sub tab c
 +-- main tab 3
 +-- main tab 4

For now i have done exactly what the initial codepen does, which is build the main navigation in the index.html directly without using an abstract /tab state for it, which then allows your FIRST /tab abstract state to be used as a container for subtabs… imo ugly but it works :confused:

I really hope there is a way to approach this in a nicer way. I just found out that using this method, your nav history gets mucked up. nice :confused: