I’m working on an app where we need to be able to navigate back in history when the user jumps through content on any tab.
I’ve prepared a Codepen showing how to achieve this. It is somewhat hacky, but it could be evolved into an alternative set of directives to <ion-tabs> and <ion-tab> which force you to declare separate <ion-nav-view> elements on each <ion-tab>, ultimately producing separate navigation histories.
If you’d want to permit navigation between content on every tab BUT reset the history whenever the users clicks on tabs, you can always add the nav-clear directive to the links on the tabs. There is an example of that too on the codepen.
It would be awesome to have some feedback and thought from you on this concept.
Don’t really understand the use case? Also most users have an expectation of how the UI should behave, stray to far from that and you have lost them IMHO
Well, in our case, the default behavior was producing some really confusing navigation issues.
Our app has 4 tabs: timeline, notifications, account and about
In timeline you see a list of cards. Each card is like a tweet, with a header including the avatar, username and name of the author.
In account you see the details of your account and also a timeline filtered with your publications only.
The default action when clicking on a card in any timeline is to navigate to the publication details, that includes other user comments and extended information. That view belongs to the timeline tab.
With the default tabs, a user would click on a publication in his account’s timeline and would navigate to its detail but without a back button in the header, as it’s located on other tab.
With the solution I propose here, we have been able to provide back buttons in a more intuitive way, matching the normal expectations of our users in our case.
Thanks very much for this. Other people had pointed me to here and your code seems to fit exactly what I need. However, I can’t really figure out what you did here.
The above is my codepen. If you press the ‘about’ tab (bottom middle tab). You can see it has two pages. But if you press the ‘about navstack’ on the page of the ‘home’ tab. It goes directly into the 2nd page of the about tab. Now the about tab will never display the 1st page.
Could you advise me what is the difference between your code and my code? thanks in advance.
