Question

我使用为iron-list提供的演示来获取json数据并创建铁列表项。一切都运作良好。

但是，在创建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>

Answer 1

我再看一下样式文档，其中的示例<style>...</style>就在<dom-module下面......就像这样

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

在使用<style>..</style>时，<template>置于<dom-module ..以下，请勿加载。

Polymer v1.0铁列表项目布局样式

1 个答案: