JSFiddle - React, Tailwind, and code Playground

by gabriela b

HTML

<base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-list/iron-list.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<dom-module id="x-test">
    <template>
        <iron-list id="list" items="{{words}}">
            <template>
                <paper-item>Item: <span>[[item]]</span>
                    <paper-icon-button icon="clear" on-tap="_clear"></paper-icon-button>
                </paper-item>
            </template>
        </iron-list>
    </template>
</dom-module>
<x-test></x-test>

CSS

iron-list {
  height: 200px;
}

JavaScript

Polymer({
    is: 'x-test',
    properties: {
        words: {
            type: Array,
            value: function() {
                var arr = [];
                for (var i = 0; i < 26; i++)
                    arr.push(String.fromCharCode(65 + i));
                return arr;
            },
        },
    },
    ready: function() {
    },
    _clear: function(e) {
        this.arrayDelete('words', e.model.item);
        this.$.list.scrollToIndex(this.words.length - 1);
    }
    
});