有没有办法根据设备宽度将属性设置为 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>
关于javascript - polymer 1.0 : Setting a boolean property depending on device width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40095042/