Polymer v1.0 iron-list 项目布局样式答案

【问题标题】：Polymer v1.0 iron-list items layout stylingPolymer v1.0 iron-list 项目布局样式
【发布时间】：2015-07-18 19:07:35
【问题描述】：

我正在使用为 iron-list 提供的演示来获取 json 数据并创建 iron-list 项目。一切正常。

但是，当创建 dom-module 时，每个项目的布局样式都不正确，我怀疑 @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); 没有被选中。

如果我直接进入 iron-flex-layout.html 并复制这些布局的 css，项目看起来还不错

我查看了 v.1 的样式文档，但我看不到任何明显的内容

谢谢

代码

<body unresolved>
  <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
  <paper-toolbar class="tall">
  <paper-icon-button icon="arrow-back"></paper-icon-button>
  <div class="flex"></div>
  <paper-icon-button icon="search"></paper-icon-button>
  <paper-icon-button icon="more-vert"></paper-icon-button>
  <div class="bottom title">iron-list</div>
</paper-toolbar>
<my-request></my-request>
</paper-scroll-header-panel>

<dom-module id="my-request">
<template>
  <iron-ajax auto id="ajaxPost" url="the-url" handle-as="json" last-response="{{data}}" on-respone="handleResponse"></iron-ajax>
  <iron-list items="{{data.items}}" as="item">
  <style>

    iron-list {
      background-color: var(--paper-grey-200, #eee);

    }

    .item {
      @apply(--layout-horizontal);

      margin: 16px 16px 0 16px;
      padding: 20px;

      border-radius: 8px;
      background-color: white;
      border: 1px solid #ddd;
    }

    .pad {
      padding: 0 16px;
      @apply(--layout-flex);
      @apply(--layout-vertical);
    }

    .primary {
      font-size: 16px;
      font-weight: bold;
    }

    .secondary {
      font-size: 14px;
    }

    .dim {
      color: gray;
      position: absolute;
      right: 70px;
      bottom: 10px;
    }
    .more {
      position: absolute;
      bottom: 10;
      right: 37px;
      color:#D3D3D3;
    }


  </style>
  <template>
    <div>
      <div class="item">
        <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image>
        <div class="pad">
          <div class="primary">{{item.the_title}}</div>
          <div class="secondary">{{item.info}}</div>
          <div class="dist secondary dim"><span>{{item.lat}}</span>,<span>{{item.lng}}</span></div>
        </div>
        <iron-icon class="more" icon="star"></iron-icon>
        <iron-icon icon="more-vert"></iron-icon>
      </div>
    </div>
  </template>
</iron-list>
</template>
</dom-module>

<script>
  (function() {
    Polymer({
      is: 'my-request',
      handleResponse: function() {
        console.log('handleResponse');
      }

    });
  })();
</script>
</body>

【问题讨论】：

嗨，塔索斯。感谢您想添加解决方案。请把它移到一个自我回答上好吗？这样，您可以通过单击左侧的勾号图标将其标记为已接受 - 我们不希望在此处使用 [已解决] 标题黑客。谢谢！
@halfer 是的，这就是我想要做的第一件事。我没有问那么多问题，也不知道页面底部的“回答你自己的问题”按钮。现在我知道了。谢谢
没有问题。另外，快速提示：如果您想恢复到以前的版本，只需浏览 version history 并在要恢复的早期版本上选择“回滚”。
@halfer 看起来不错，但也不知道。 :) 谢谢

标签： polymer polymer-1.0

【解决方案1】：

我又查看了样式文档，其中的示例在<dom-module 下方有<style>...</style> ...就像这样

<dom-module id="the-id">
<style>
.
.
</style>

所以在使用<dom-module .. 时将<style>..</style> 放在<template> 下面不要被加载。

【讨论】：

这又变了。 <style> 内 <dom-module><template> 再次成为首选方式。