This is an idea that I haven’t seen implemented with ionic yet but thought would be a good idea. I just want to see people response to this or if anyone has already done this.
Seems like a nice common layout pattern is to have the two column master/detail, where on larger screens, the side menu is out on the left about 17 ems. When the screen size get smaller, the main content slides over and you have the standard slide menu that ships with ionic.
What does everyone think of this?
I think the sideMenu should be used only as sideMenu (so to slide the main pane).
The side list (like the iPad Settings app) should be defined as an ui-router partial view visible only on larger screens.
For the tablet app layout, you can use two nav-views, one to display the “settings” template and the other one to display the “mail” template.
So did some digging around the sass files and found this class .split-pane as well as .split-pane-menu and .split-pane-content. Seems like this is in the works with just css but setting up the side menu in your index.html.
I’m evaluating Ionic for our upcoming app and it would be really nice to have some kind of prescriptive guidance for this case… I love the “native” styling of Ionic and would really like to use it for this project, but all the demos make it seem like only phone-sized screens are being targeted.
This split mode seems like something you could implement in mostly-CSS, but the more I think about it the more I’m deciding that there needs to be higher level awareness of the presentation format so that you can do one thing (nested views) in small screen case and another (side-by-side, maybe with additional UI elements added) in large screen.
Any plans to address this? I’d be willing to help write user-contrib components just as long as I know I’m not fighting against the framework.
(to make things more difficult, our app is targeting 3 screens - phone/pad/browser - but I can find ways to make the browser mode feel natural even with “native” UI elements)
Since the addition of ui-router, this has been a feature that I really wanted to seem implemented. I’ve messed around trying to work this up but haven’t been successful yet. Anyone else been able to set this up and be able get things working?
+1
I also think that the control, being talked about in this post, is really needed.
+1. I agree that this framework seems to focus solely on mobile apps and ignores tablet apps. I had a go at implementing the behaviour as you described but gave up. I would love to see a split-view layout component that could be used to achieve this, perhaps the left view turns into a slide view on mobile and stays a proper left view on tablet / desktop
Thats pretty great, does is support nested navigation like in this demo?
http://demos.telerik.com/kendo-ui/mobile/splitview/index.html
Hi, can we have exaclty same splitview controller in ionic as in ios (i.e Listview as the first screen which is to be displyed to user and after clicking any item from listview it opens detail view in iPhone and in iPad both listview and detailview are aside each other). In current senario (i.e in ionic) first scrren which is displayed to user was detail screen and then after clicking toggle button listview appears.