如何使用聚合物芯媒體查詢改變元件屬性

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？

我們是否可以將代碼包裝到​​或者我們必須創建一個自定義元素？

Answer 1

如果您在索引文件上有自動綁定模板，則無需在自定義元素中執行此操作。聚合物還可以通過使用attribute?="{{value}}"語法來檢查布爾值屬性。在下面的情況下，start-justified?="{{!queryMatches}}"表示如果頁面寬度超過700px，則queryMatches將爲false，並且內容將證明左邊。而center-justified?="{{queryMatches}}"意味着，如果頁面較小然後寬度queryMatches的700像素將是真實的內容將居中對齊

它會看起來像

<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

編輯完整性