css - polymer 铁介质查询不适用于dom-repeat元素

我在这里看到了很多关于在Polymer上使用flexbox和iron-media-query的问题，但没有一个能真正解决我遇到的问题，这很简单。我有一个dom-repeat模板，它在屏幕尺寸小于600px时垂直显示纸卡元素。我希望它们在屏幕扩展到大于600像素时水平显示，如果它们不能完全排成一行，则最终会分成几行，这必将成为一排纸牌。即使将屏幕扩展到600px以上，下面的代码也只能垂直显示卡。我可以在纯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>

最佳答案

为什么将所有内容放入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为true，它将在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

关于css - polymer 铁介质查询不适用于dom-repeat元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45636521/