javascript - polymer 1.0 : Setting a boolean property depending on device width

标签 javascript polymer polymer-1.0

有没有办法根据设备宽度将属性设置为 false 或 true?

提前致谢!

最佳答案

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

此示例设置 wide bool 属性为 true当视口(viewport)宽度至少为 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

关于javascript - polymer 1.0 : Setting a boolean property depending on device width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40095042/

相关文章:

javascript - 选择 polymer 选项

javascript - 结合 promise 和链接

javascript - 获取裁剪线可见区域长度 d3

javascript - AngularJS - ng-show 没有有条件地显示 div 标签?

polymer - polymer 1.0“数组样式”路径访问器,可替代表达式中的括号表示法

javascript - 在嵌套的 Polymer 自定义元素中访问 JavaScript 方法

javascript - 处理 Javascript 中的异步调用

javascript - Iron-List 多重选择将项目多次添加到选择中

css - Material 设计对网络的有意义的转变

javascript - 如何仅更改页面内 vaadin-select 中 vaadin-select-text-field 的颜色?