Nested Tabs within Header


#1

I’ll preface this message by letting you know I am brand new at this. My very first time ever looking at AngularJS and Ionic was yesterday, so go easy on me :smile:

I’ve tried a number of things but nothing seems to work. I’d like to have tabs nested within my header that would have other icons that would go off to other screens. The tabs nested would just change between a list view of all my items and a map view (google maps)

What I do have working so far is the list view and main details view. The other thing I cannot figure out is how to have tabs on the detail view that carries into sub-views of the details (it won’t carry over the id in the tab link). When I currently click into a details view and then click a tab, it is not carrying the id of the item down into the tab nav.

I’d also love to use something along the lines of the headerShrink demo that I saw on Codepen as well.

I have attached an image mockup of what I’m looking to build, if anyone could point me in the right direction that would be great! I know I’m asking a lot here… I’m not asking anyone to build the app for me but since I’m new I just don’t know where to start and I don’t want to go down the wrong path…

Thanks in advance.


#2

It seems to me your tabs in the header are not real tabs. Why not try using a button bar instead?