带有网格属性的<iron-list>每行只显示一个项目

时间:2017-01-12 09:43:04

标签: css polymer-1.0

我想将Polymer目录中的项目用作网格 我在列表中设置了网格属性,并为孩子们提供了固定的宽度和高度 但是,每行只包含一个孩子 这是我的代码:

这是我的自定义元素的容器,其中包含铁列表

<div style="height: 675px;">
    <cit-entity-card-container card-data="[[cardData]]"></cit-entity-card-container>
</div>

这是我的自定义元素

<dom-module id="cit-entity-card-container">

<style include="cit-shared-styles">
    :host {
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
        margin: 0 8px 0 0;
        height: 100%;
        border-radius: 5px;
        background-color: var(--cit-white);
        box-sizing: border-box;
        padding: 16px 0 16px 0;
        display: block;
    }

    iron-list {
        height: 675px;
    }
</style>

<template>
    <iron-list items="[[cardData]]" as="item" grid>
        <template>
            <div style="width: 100px; height: 100px;">100x100</div>
        </template>
    </iron-list>
</template>

<script>
    Polymer({
        is: 'cit-entity-card-container',

        properties: {
            cardData: {
                type: Array,
                value: function() { return []; }
            }
        }
    });
</script>

它的外观如下:Screenshot

1 个答案:

答案 0 :(得分:0)

我解决了它 最后这很简单,但真的让我感到很紧张。

我的铁榜是最新版本背后的一些版本 通过凉亭更新(凉亭 - 力更新)
问题解决了