Polymer 聚合物铁表

Polymer 聚合物铁表,polymer,iron-list,Polymer,Iron List,我想用iron list显示一个带有上下页边距的项目网格,但没有结果。我使用的是polymer 2.0和iron list 2.0.16。 当我突出显示铁质列表中的任何项目时,边距不会显示,而是显示在devtools中。我不知道我什么地方做得不对。我试着修复它,但没有成功。 :host { display: block; padding: 10px; } .country { height: 50px; width: 300px; back

我想用iron list显示一个带有上下页边距的项目网格,但没有结果。我使用的是polymer 2.0和iron list 2.0.16。 当我突出显示铁质列表中的任何项目时,边距不会显示,而是显示在devtools中。我不知道我什么地方做得不对。我试着修复它,但没有成功。

  :host {
    display: block;
    padding: 10px;
  }

  .country {
    height: 50px;
    width: 300px;
    background-color: white;
    margin: 16px 0;

  }

  iron-list {
    height: 100vh;
  }
</style>
<data-story-data region="africa" countries="{{countries}}"></data-story data>
<iron-list items="[[countries]]" as="country" scroll-target="document" grid>
  <template>
    <div class="country">
      <p>[[country.name]]</p>

    </div>
    <!--
    <paper-card>
      <div class="card-content">
        <div>[[country.name]]</div>
      </div>
      <div class="card-actions">
        <a href="[[rootPath]]detail/country/[[country.name]]/[[country.alpha2Code]]/about" tabindex="-1">
          <paper-button raised>view</paper-button>
        </a>
      </div>
    </paper-card>
  -->
  </template>
</iron-list>
:主机{
显示:块;
填充:10px;
}
.国家{
高度:50px;
宽度:300px;
背景色:白色;
利润率:16px0;
}
铁名单{
高度:100vh;
}
[[country.name]]

  :host {
    display: block;
    padding: 10px;
  }

  .country {
    height: 50px;
    width: 300px;
    background-color: white;
    margin: 16px 0;

  }

  iron-list {
    height: 100vh;
  }
</style>
<data-story-data region="africa" countries="{{countries}}"></data-story data>
<iron-list items="[[countries]]" as="country" scroll-target="document" grid>
  <template>
    <div class="country">
      <p>[[country.name]]</p>

    </div>
    <!--
    <paper-card>
      <div class="card-content">
        <div>[[country.name]]</div>
      </div>
      <div class="card-actions">
        <a href="[[rootPath]]detail/country/[[country.name]]/[[country.alpha2Code]]/about" tabindex="-1">
          <paper-button raised>view</paper-button>
        </a>
      </div>
    </paper-card>
  -->
  </template>
</iron-list>
这就是我得到的


如何使16px上下页边距正常工作。提前感谢。

列表项显示0px的边距,因为
铁名单
覆盖了它们:

铁名单.html

<style>

    /* ... */

    #items > ::slotted(*) {
        box-sizing: border-box;
        margin: 0; /* Here */
        position: absolute;
        top: 0;
        will-change: transform;
    }

    /* ... */

</style>

/* ... */
#项目>::开槽(*){
框大小:边框框;
页边距:0;/*此处*/
位置:绝对位置;
排名:0;
改变:转变;
}
/* ... */
尝试将卡片包装在容器中,并使用其填充物而不是边距来获得所需的间距:

<style>
  .country {
      padding: 16px 0;
  }
</style>

<iron-list items="[[countries]]" as="country" scroll-target="document" grid>
  <template>
    <div class="country">
        <paper-card>
          <div class="card-content">
            <div>[[country.name]]</div>
          </div>
          <div class="card-actions">
            <a href="[[rootPath]]detail/country/[[country.name]]/[[country.alpha2Code]]/about" tabindex="-1">
              <paper-button raised>view</paper-button>
            </a>
          </div>
        </paper-card>
    </div>
  </template>
</iron-list>

.国家{
填充:16px0;
}
[[country.name]]

您的解决方案有效。谢谢我想这一定是一个新的铁名单行为,因为我从来没有使用过聚合物1.x.x。您是否知道关于使用聚合物构建健壮的应用程序(包括测试)的更多信息。