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!