Polymer iron-media-query 不适用于 dom-repeat 元素

Question

我在这里看到了很多关于在 Polymer 中使用 flexbox 和 iron-media-query 的问题，但是 none 确实解决了我遇到的问题，这是一个非常简单的问题。我有一个 dom-repeat 模板，当屏幕尺寸小于 600 像素时，它会垂直显示纸卡元素。我希望它们在屏幕扩展到大于 600 像素时水平显示，如果它们不能全部放在一行中，最终会分成几行，从而成为卡片网格。即使屏幕扩展到 600 像素以上，下面的代码也只会垂直显示卡片。我可以在 CSS 中做到这一点，但即使在阅读了文档并尝试了演示之后，我仍然在与 iron-media-query 作斗争。

更新：我尝试将纸卡元素包装在

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

但这使得 firebase-query 元素停止工作。

这是我的代码：

<!-- 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> 等等。

您需要导入 iron-flex-layout-classes.html 对于 flexbox 样式。导入这个：

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

iron-media-query 用于数据绑定到 CSS 媒体查询。因此，无需包含样式。它给出表示页面是否匹配该媒体查询的布尔值。如果 wide 为真，它将放置一个属性 wide-layout 就像 div 上的 class 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

Polymer iron-media-query 不适用于 dom-repeat 元素

Polymer iron-media-query not working on dom-repeat element

css

media-queries

polymer