Ionic Split View

Hello guys,

I recently started getting into Ionic 2 and I really like it. Now I have been through the tutorial and did some work on my own and I got to a point where I’d like to make a simple common Split View. I tried to look around to find a way to do it but it seems that there is nothing that helps you out. In particular I found that in Ionic 1 it is possible to make it simply with ion-side-menus, something that does not work in Ionic 2.
So if I would like to do something similar to: http://blog.ionic.io/splitview-has-landed/ but in Ionic 2, is there something already built in Ionic 2 that helps me out or do I have to do it on my own (i.e. divide the page in divs). If that is the case anyone that can tell a suitable approach?

3 Likes

So after some work I managed to have something similar encapsulating two angular 2 components into a page component. Playing around with CSS I managed to move things to their respective space. Too bad that I did not manage to add animations for the left tab which is meant to be a simple menu (but actually a ion-list because ion-menu looks like won’t do the job correctly) with multiple layers. I am giving it a try with but looks like it won’t get affected by CSS and it’s really getting a pain to make the right side of the splitview even visible.
Am I the only one who’s even trying to get something like this? Could it be that ionic2 is not ready yet to properly handle splitviews? Or it’s just me who’s missing something?

1 Like

Anyone of the ionic team can at least tell if something that allows a simple splitview is being taken into consideration in the near future?

Hi Nicolas

not sure if you could found a way to solve this issue. I have been struggling to find a solution as well and I found that you don’t really need an explicit splitView component on ionic 2. You can basically create a container component with 2 div elements, each having its own navigation controller (if needed). Handle communication between master/detail components using events or have a separate state object drive the UI configuration.

Cheers
Ivan

1 Like

Thank you that looks like a feasible solution :slight_smile:

@zmit @nicolaslusa I am also looking this kind of implementation. Can you please provide me an example for this?