I need to create an application that scales nicely from smartphones to tablets. While ionic2 has some basic support for responsive grids, what I really need is a concept for supporting different layouts/navigation schemes.
Take a master detail view, for example. On tablets I want the a list of items on the left and details about the selected item on the right. on the smartphone, however, selecting an item should trigger a navigation to a second details page.
I’m aware, that there is showWhen – but imo it feels tedious to put that everywhere…
Does anybody have experiences with this kind of adaptivity? How would you solve such issues?
I’m thankful for any suggestions and experience reports!
Totally agree, we need a way to do adaptive navigation with a preference for what should apply at what size(s). Not super easy. Sounds like you need (probably already have) your details view in a components and either show it in the grid or present a Page/Modal when the client width is too small. So far I’ve got different code paths for Page/Modal navigation depending on client width.
The master-detail experience you are talking of is something different, but for my app which is already live on Android and Windows 10 , the app adapts quickly to the size of the layout. I am using grid layout to show the items in a list. For tab or any device of higher dimension than phone, the grid layout is shown and for a phone only 1 item for each row is shown.
There is no extra code to identify any device size, etc.
The app is a client for Stack Exchange and is called StackCook.
I really appreciate Ionic, your team, and its work.
I chose Ionic in 2014 (at beta stage) and we are still working with it (v1 branch).
We are targetting companies which are all using tablets (dealer, sales man, …).
We did our best to build a tablet first application (thanks to grids and little hacks) that can also be run on smartphones.