Question

是否有办法根据设备宽度将属性设置为false或true？

提前致谢！

Answer 1

您可以使用基于与特定设备宽度匹配的媒体查询设置属性的<iron-media-query>。

当视口宽度至少为600px时，此示例将wide布尔属性设置为true：

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

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties : {
      wide: {
        type: Boolean,
        value: false
      }
    }
  });
});

＆＃13;

<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>

＆＃13;

^codepen

Polymer 1.0：根据设备宽度设置布尔属性

1 个答案: