CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Hernan Cote
Hernan Cote

Reputation: 1

Polymer 1.0: Setting a boolean property depending on device width

Is there a way to set a property to false or true depending on the device width?

Thanks in advance!

Upvotes: 0

Views: 58

Answers (1)

tony19
tony19

Reputation: 138266

You could use the <iron-media-query> that sets a property based on a media query that matches a specific device width.

This example sets the wide Boolean property to true when the viewport width is at least 600px:

<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties : {
      wide: {
        type: Boolean,
        value: false
      }
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-media-query/iron-media-query.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
      <div>viewport width >= 600px : [[wide]]</div>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 1

Related Questions