Polymer 聚合物铁表
我想用iron list显示一个带有上下页边距的项目网格,但没有结果。我使用的是polymer 2.0和iron list 2.0.16。 当我突出显示铁质列表中的任何项目时,边距不会显示,而是显示在devtools中。我不知道我什么地方做得不对。我试着修复它,但没有成功。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
: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。您是否知道关于使用聚合物构建健壮的应用程序(包括测试)的更多信息。