bower_components/iron-list/test/x-list.html

<!--
@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>