Split Pane behavior: navigating it right

Hi everyone!

For me, the news about Split Pane (http://blog.ionic.io/ionic-2-2-0-is-out/) were exciting, especially the Nav-inception part, mentioning Mail app on iPad, because that’s exactly the type of navigation I need for my app (and many others probably do too, because this kind of navigation is an essential UX pattern).

However, out of the box <ion-split-pane> behaves differently and reveals the menu instead. This is how the result looks by default:

This could be useful for some interfaces, but the most common design pattern looks and behaves differently. Native Mail, Notes and many 3-rd party apps (including the ones on Android) use left pane for navigation views and right one for content (with one of navigation views displayed as home view on small screens) . Here’s how Mail works:

Can anyone suggest how to recreate this behavior in Ionic 2 using Split Pane?

Note: Ionic does allow to have separate navigations for each pane using two <ion-nav> elements, so in theory it’s possible to have this behavior. However, in order it to work, we have to add attribute main to our content (orange block), which makes a default screen on mobile screens, which is definitely not a desired effect.

Thanks everyone in advance!

2 Likes

Hi.Did you find a solution? I have a similar problem myself.

No luck so far, no feedback either.