Different view composition for tablet and phone


#1

I have a phone app that has a series of 4 consecutive screens. Each screen is a detail of the selection made on the previous screen. For the tablet version, I would like to use the first screen as a fixed view on the side so that the top level selection is always visible.

What would be the recommended way to achieve this? Should I create different states for both phone and tablet or should I define a set of states once and conditionally use templates depending on the target device?


#2

Right now this isn’t fully supported. There’s a lot thats keeping this from happening, mostly UI-router.
It’s not a main priority right now, but keep an eye out for it


#3

Thanks for the prompt response. I got this to work for the first 2 screens using the templateUrl function in the state. It seems that this is not scalable for further levels, which is probably the issue with UI-router you are mentioning.

I’ll keep an eye out for this.


#4

does anyone have any of there progress on this issue posted somewhere so that maybe the community can come up with a solution?


#5

Theres a WIP branch for this.

https://github.com/driftyco/ionic/tree/wip-split-pane


#6

For List -> Detail experience on a phone, the List view will be the first level and when you select an item the Detail view will be revealed and concealing the List view.

With SplitView, on a phone, the Content view is the first level. Is it possible to make the Side Menu view as the first level on a phone to achieve List -> Detail experience.

Is it possible to extend expose-aside-when for List -> Detail layout in addition to Side Menu -> Content?