Polymer v1.0铁质列表项布局样式_Polymer_Polymer 1.0

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

polymer

Polymer v1.0铁质列表项布局样式,polymer,polymer-1.0,Polymer,Polymer 1.0,我使用为iron list提供的演示获取json数据并创建iron list项。一切进展顺利但是，在创建dom模块时每个项目的布局样式不正确，我怀疑@apply（--layout horizontal）@应用（--layout-flex）@应用（--垂直布局）未被拾取如果我直接进入iron flex layout.html，复制那些布局的css，项目看起来就可以了我看了一下v.1的样式文档，但没有看到任何明显的内容谢谢代码 <body unresolved> <p

我使用为iron list提供的演示获取json数据并创建iron list项。一切进展顺利

但是，在创建

dom模块时

每个项目的布局样式不正确，我怀疑

@apply（--layout horizontal）@应用（--layout-flex）@应用（--垂直布局）未被拾取
如果我直接进入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>


铁名单
铁名单{
背景色：var（--纸灰色-200，#eee）；
}
.项目{
@应用（--水平布局）；
保证金：16px 16px 0 16px；
填充：20px；
边界半径：8px；
背景色：白色；
边框：1px实心#ddd；
}
.pad{
填充：0 16px；
@应用（--layout-flex）；
@应用（--垂直布局）；
}
.小学{
字体大小：16px；
字体大小：粗体；
}
.中学{
字体大小：14px；
}
.昏暗{
颜色：灰色；
位置：绝对位置；
右：70px；
底部：10px；
}
.更多{
位置：绝对位置；
底部：10；
右：37px；
颜色：#D3；
}
{{item.the_title}}
{{item.info}
{{item.lat}，{{item.lng}
（功能（）{
聚合物({
是‘我的要求’，
HandlerResponse:function（）{
console.log（'handleResponse'）；
}
});
})();
我又看了一眼样式文档，其中的示例就在Hi Tasos的下方。感谢您想要添加解决方案。请把它移到自我回答的位置好吗？这样，你可以点击左边的勾号图标将其标记为已接受-我们不希望在这里使用[已解决的]标题破解。谢谢@哈弗：是的，这就是我第一个想做的。我没有问那么多问题，也不知道页面底部的“回答你自己的问题”按钮。现在我知道了。谢谢，没有问题。另外，快速提示：如果要还原到以前的版本，只需浏览并在要还原的早期版本上选择“回滚”。@halfer看起来不错，但也不知道这一点。：）谢谢，又变了<代码>

内部

也是首选方法。

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