聚合物鐵媒體查詢不在dom重複元素上工作

Question

我在這裏看到了很多關於在Polymer上使用flexbox和鐵媒體查詢的問題，但沒有一個真正解決了我遇到的問題，這是相當一個簡單的。我有一個dom-repeat模板，它在屏幕尺寸小於600px時垂直顯示紙卡元素。我希望它們在屏幕展開大於600像素時水平顯示，如果它們不能全部適合一行，最終會分成若干行，這些都必不可少。下面的代碼僅在屏幕擴展到600像素以上時才垂直顯示卡片。我可以在純CSS中做到這一點，但即使在閱讀文檔並嘗試演示之後，我仍然爲鐵媒體查詢而苦苦掙扎。

更新：我想在一個

<template is="dom-if" if="{{wide}}"> 

包裹紙卡元素但取得的火力點查詢元素停止工作。

這裏是我的代碼：

<!-- this is a custom web component --> 

<!-- dependencies --> 
<link rel="import" href="../bower_components/polymerfire/firebase-query.html"> 
<link rel="import" href="../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html"> 


<dom-module id="browse-events"> 
    <template> 
     <firebase-query 
         id="query-all" 
         path="/events" 
         data="{{events}}"> 
     </firebase-query> 

     <template is="dom-repeat" items="[[events]]" as="event"> 
      <custom-style> 
       <style is="custom-style" include="iron-flex iron-media-query"> 

        .flex-dir[wide-layout="wide"] .flexchild { 
         @apply --layout-horizontal; 
        } 

        paper-card { 
         margin: 5%; 
         font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
         font-size: 1em; 
         width: 300px; 
        } 

        summary::-webkit-details-marker { 
         display: none; 
        } 

        summary:after { 
         content: "+"; 
         font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
         font-size: 1.5em; 
        } 

        details[open] summary:after { 
         content: "-"; 
        } 

        details p { 
         width: 100%; 
        } 

       </style> 
      </custom-style> 


      <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query> 

      <div class="flex-dir" wide-layout$="{{wide}}"> <!-- flex container --> 
       <paper-card heading="[[event.title]]" class="flexchild"> 
        <div class="card-content"> 
         [[event.city]] 
        </div> 
        <div class="card-content"> 
         [[event.starttime]] 
        </div> 
        <div class="card-content"> 
         [[event.price]] 
        </div> 
        <div class="card-actions"> 
         <details> 
          <summary><!-- + icon --></summary> 
          <p>[[event.description]]</p> 
         </details> 
         <script> 

         </script> 
        </div> 
       </paper-card> 
      </div> 
     </template> <!-- end dom repeat --> 
    </template> 

    <script> 
     Polymer({ 
      is:'browse-events', 
      properties: { 
       events: { 
        type: Object 
       } 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

你爲什麼把裏面的一切dom-repeat？ dom-repeat將模板內容的一個實例綁定到提供的數組中的每個對象。因此，重複styles和iron-media-query。

把你的<style>剛剛在<template>之後，然後，<firebase-query,<iron-media-query>等。

您需要爲flexbox樣式導入iron-flex-layout-classes.html 。 導入這樣的：

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

iron-media-query是數據綁定到一個CSS媒體查詢。所以，不需要包括風格。它給出表示頁面是否與該媒體查詢匹配的布爾值。如果wide爲真，則它會將屬性wide-layout與div一起放置爲flex-dir類。你不需要在css中檢查wide-layout="wide"。

下面是更新後的代碼：

<dom-module id="browse-events"> 
<template> 
<custom-style> 
    <style is="custom-style" include="iron-flex"> 
    .flex-dir[wide-layout] .flexchild { 
     @apply --layout-horizontal; 
    } 

    paper-card { 
     margin: 5%; 
     font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
     font-size: 1em; 
     width: 300px; 
    } 

    summary::-webkit-details-marker { 
     display: none; 
    } 

    summary:after { 
     content: "+"; 
     font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
     font-size: 1.5em; 
    } 

    details[open] summary:after { 
     content: "-"; 
    } 

    details p { 
     width: 100%; 
    } 
    </style> 
</custom-style> 

<firebase-query id="query-all" path="/events" data="{{events}}"> 
</firebase-query> 

<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query> 


<div class="flex-dir" wide-layout$="{{wide}}"> 
    <!-- flex container --> 
    <template is="dom-repeat" items="[[events]]" as="event"> 
    <paper-card heading="[[event.title]]" class="flexchild"> 
     <div class="card-content"> 
     [[event.city]] 
     </div> 
     <div class="card-content"> 
     [[event.starttime]] 
     </div> 
     <div class="card-content"> 
     [[event.price]] 
     </div> 
     <div class="card-actions"> 
     <details> 
      <summary> 
      <!-- + icon --> 
      </summary> 
      <p>[[event.description]]</p> 
     </details> 
     <script> 
     </script> 
     </div> 
    </paper-card> 
    </template> 
    <!-- end dom repeat --> 
</div> 

</template> 

<script> 
Polymer({ 
    is: 'browse-events', 
    properties: { 
    events: { 
     type: Object 
    } 
    } 
}); 

Plnkr：http://plnkr.co/edit/jfHNhIHijhMMy7jf90e0