如何使用 polymer core-media-query 改变元素属性

Question

<core-toolbar class="tall" horizontal start-justified layout>
 <div class="logo"><img src="assets/logo.png"></div>
 <h1 class="bottom">Company name</h1>     
</core-toolbar>

在上面的代码中我有 horizontal start-justified layout 这意味着 core-toolbar 中的元素向左对齐。

现在我想在屏幕尺寸低于 700px 时将 start-justified 更改为 center-justified。如何用 core-media-query 做到这一点？

我们可以将代码包装到 <core-media-query> 还是必须创建一个自定义元素？

Answer 1

如果索引文件中有自动绑定模板，则无需在自定义元素中执行此操作。 Polymer 还可以使用 attribute?="{{value}}" 语法根据布尔值检查属性。在下面的例子中 start-justified?="{{!queryMatches}}" 意味着如果页面的宽度大于 700px queryMatches 将为 false 并且内容将左对齐。而 center-justified?="{{queryMatches}}" 表示如果页面较小，则宽度为 700 像素的 queryMatches 将为真，内容将居中对齐

它看起来像

<template is="auto-binding">
  <core-media-query query="max-width:700px" queryMatches="{{queryMatches}}"></core-media-query>
   <core-toolbar class="tall" horizontal start-justified?="{{!queryMatches}}" center-justified?="{{queryMatches}}" layout>
   <div class="logo"><img src="assets/logo.png"></div>
   <h1 class="bottom">Company name</h1>
  </core-toolbar>
</template>

这是有效的http://plnkr.co/edit/VYdFOt89E6RH7fTTlZ5m?p=preview

为了完整性进行了编辑

如何使用 polymer core-media-query 改变元素属性

How to use polymer core-media-query to change element attribute

web-component

polymer