<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE The complete set of authors may be found at http://polymer.github.io/AUTHORS The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS --> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../iron-list.html"> <dom-module id="x-list"> <style> :host { @apply(--layout-fit); @apply(--layout-vertical); display: block; } .item { color: white; } .item:nth-child(odd) { background-color: green; } .item:nth-child(even) { background-color: red; } </style> <template> <iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list"> <template> <div class="item"> <div style$="[[_computedItemHeight()]]">[[item.index]]</div> </div> </template> </iron-list> </template> </dom-module> <script> Polymer({ is: 'x-list', properties: { data: { type: Array }, itemHeight: { type: Number, value: 100 }, listHeight: { type: Number, value: 300 }, pre: { type: Boolean } }, get list() { return this.$.list; }, _computedItemHeight: function() { var css = ''; css += this.itemHeight === 0 ? '' : 'height: ' + (this.itemHeight) + 'px;'; css += this.pre ? 'white-space:pre;' : ''; return css; }, _computedListHeight: function(listHeight) { return 'height: ' + (listHeight) + 'px'; } }); </script>