UI Router question related to tabs


#1

My app has multiple pages, and one of those pages has tabs. When I navigate to a regular page without tabs, I get a nice animation, and the back button appears in the header.

But when I navigate to the tabs page, the back button doesn’t appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?

Check out this Codepen to see what I mean: http://codepen.io/anon/pen/gApoH


#2

Hey @coen_warmer, thanks for posting this. I’m pretty sure @adam and I removed the animation/transition between tabs, because it’s not often seen in most native tab ux. We mostly see transitions on “back” and “forward” buttons, but not tabs.

That being said, perhaps @adam could enlighten us on a way to still add transition/animation for tabs should you want to have them.


#3

Hey @Ben and @adam, sorry, I didn’t mean a transition between the tabs (no transitions between tabs is fine :slight_smile: ), but a transition from a link within a nested view to a page. So when I navigate from a page without tabs to a page that has tabs, and I click a link, is is loaded in the child view, and not in the main view.

Also, the back button doesn’t appear when I navigate from a page to a another page that has tabs.

Any help in how to set up this in my state configuration would be extremely helpful.


#4

I’ve also posted a question on Stackoverflow:

And set up an additional Plunkr that described exactly what I mean. Any help in figuring this is would be greatly greatly appreciated!!


#5

Users on Stackoverflow have confirmed this to be a bug within Ionic. I’m opening an issue for it.


#6

Issue opened at:


#7

The back button does not display because when you go into a tab, it enter’s it own “history”, meaning each tab has its own navigation back and forward.


#8

Please correct me if I’m wrong, but I think that means that the offered tabs component in its current form is not suitable in the use case of having multiple pages where some have tabs and some don’t.

If it is possible, I’d love to know how it’s done. In the meantime I’ve opted to integrate the three tabs within one view and show/hide them by clicking a link.