9

I see that there is a responsive grid system for Ionic 2, but that appears to just let you create a grid style layout.

I'm looking for something that will allow me to display the view one way on a tablet, and another on a phone. In this specific instance, I have a list of jobs. If it's a tablet, I want to also show a map to the right of the list and plot them out. How to make the map I understand, but how do I tell what they are using and show the correct UI?

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
Jhorra
  • 6,233
  • 21
  • 69
  • 123

2 Answers2

8

You could decide how the layout is going to be shown by using the platform information:

Platform Name   Description
android on a device running Android.
cordova on a device running Cordova.
core    on a desktop device.
ios on a device running iOS.
ipad    on an iPad device.
iphone  on an iPhone device.
mobile  on a mobile device.
mobileweb   in a browser on a mobile device.
phablet on a phablet device.
tablet  on a tablet device.
windows on a device running Windows.

By using the underlying platform information you could show or hide things if its a tablet (or an ipad) by just simply doing:

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad');

And then by using *ngIf or whatever you need in your views, or using that isTabletOrIpad property to decide whether to initialize the map or not.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
3

Similar to @sebaferreras you can use the names listed in Platform Name, but I will suggest using it in conjunction with the showWhen attribute.

The showWhen attribute takes a string that represents a platform or screen orientation. The element the attribute is added to will only be shown when that platform or screen orientation is active.

This approach encapsulates the Platform class logic meaning you don't need to do anything in the Page.ts file, the only code you need to worry about will be in the HTML.

Example

If you want certain code to only be visible on a tablet screen

<div showWhen="tablet">
    All content inside here will be visible on tablet devices
</div>

Se the ShowWhen documentation for more information. They also offer a HideWhen attribute too.

Note

As mentioned in the comments below

  • The showWhen approach will just apply the display: none; property to the element which means your HTML will still be rendered regardless of the type of device.
  • If you take the *ngIf approach it will only load the HTML content if it meets the rules.

Performance wise *ngIf may be the better option for you, however in other scenarios showWhen may be more favourable (I'm trying to keep this generic for other readers).

Will.Harris
  • 4,004
  • 2
  • 24
  • 37
  • 2
    I agree with you, but the thing is that by just using `showWhen` in the views, you're still loading a lot of things that you're not going to show later... So why are you going to load and initialize a map in your component code, if later you're not going to show it in the view? – sebaferreras Jul 12 '16 at 10:35