使用聚合物应用网格布局创建断点
问题描述:
聚合物中的应用网格元素(助手类)允许创建响应式网格布局。给定的Polymer Example创建一个布局,其中三个列表项彼此水平放置。使用聚合物应用网格布局创建断点
为了使它在较小的屏幕上响应地将网格从3列更改为1,必须声明断点。文档讨论了在@media规则中定义自定义属性。 (上面的链接)
我无法获取媒体规则来进行更改。 我在Polymer中发现了关于@media规则的类似问题,但答案始终指向使用iron-media-query。现在Polymer文档提到了@media,我相信一定有办法做到这一点。
我尝试使用它像这样,但不能得到它的工作:
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 200px;
--app-grid-gutter: 20px;
}
@media (max-width: 600px) {
:host {
--app-grid-columns: 1;
}
}
</style>
答
望着demos他们总是叫this.updateStyles
当窗口大小,以确保所有的自定义属性正确应用。
不幸的是这些信息是从文档丢失...
attached: function() {
this._updateGridStyles = this._updateGridStyles || function() {
this.updateStyles();
}.bind(this);
window.addEventListener('resize', this._updateGridStyles);
},
detached: function() {
window.removeEventListener('resize', this._updateGridStyles);
}
如果您正在使用的应用程序,格栅的元件之外的主文档中,你将不得不调用Polymer.updateStyles()
代替。
感谢作品魅力! – Niklas