Breakpoints in templates: already there, somewhere?

Ionic Framework ionic-v3
1

I would like to know wether it’s possible to react to breakpoint changes in a template without having to rely on CSS classes but instead handling a breakpoint like a platform variable (breakpoints and platforms are - bare with me - interdependent?). Similar to what’s in the docs already for CSS utilites: http://ionicframework.com/docs/theming/css-utilities/#setting-attributes-dynamically - essentially allowing to change the view layout entirely based on the breakpoint dimensions, not just device platforms.

The grid uses breakpoints based on css classes, but that’s CSS only (as far as I understand) and I can’t check for a breakpoint at runtime, can I? Is there already a function available that spits out the currently active breakpoint or something similar? Anyboy done that and got the shirt? :slight_smile:

I want to explore the PWA aspects of Ionic 2++ and for that, it seems that it’s almost impossible to get far without some sort of breakpoint implementation that can be used within templates.

1 Like
2

I am facing this problem, too.

I want to change my grid align when the breakpoints is different.

But don’t know how to get the breakpoint status in TS file.

3

Hey folks!

So for the example in the doc

<div [attr.text-center]="isMD ? '' : null">I will be centered when isMD is true.</div>

The class would look something like…

class myClass {

  public isMD: boolean
  constructor(
    public platform: Platfrom
  ) {
    this.isMD = this.platform.is('android')
  }
}
4

Is it possible to do something like with ionic’s api?

this.platform.is('xl') // get screen width > 1200px
this.platform.is('sm') // get screen width > 576px
5

Not with platform, since is pull from a pre-defined list of values.

But you could do something like …

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}