<link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../../bower_components/paper-item/paper-item.html"> <link rel="import" href="../../bower_components/paper-item/paper-item-body.html"> <link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> <link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html"> <dom-module id="list-view-controllet"> <style> :host { @apply(--layout-vertical); } .main { @apply(--layout-flex); @apply(--layout-scroll); } iron-icon { color: var(--google-grey-500); } </style> <template> <paper-toolbar class="small-tall" style="background: #2196F3;"> <paper-icon-button id="button" icon="arrow-back"></paper-icon-button> <span>Datalets list - examples</span> </paper-toolbar> <div class="main"> <template is="dom-repeat" items="[[data]]" index-as="i"> <paper-item id="{{i}}"> <paper-item-body two-line> <div>[[item.name]]</div> <div secondary>[[item.description]]</div> </paper-item-body> </paper-item> </template> </div> </template> </dom-module> <script> Polymer({ is: 'list-view-controllet', behaviors: [ Polymer.NeonAnimatableBehavior ], listeners: { 'click': '_onClick' }, properties: { data: { type: Array, value: [] }, animationConfig: { type: Object, value: function() { return { 'entry': [{ name: 'fade-in-animation', node: this.$.button }], 'exit': [{ name: 'fade-out-animation', node: this.$.button }, { name: 'hero-animation', id: 'hero', fromPage: this }] }; } } }, _onClick: function(event) { var target = event.target; while (target !== this && !target._templateInstance) { target = target.parentNode; } // configure the page animation this.sharedElements = { 'hero': target, }; this.fire('item-click', { item: target, }); } }); </script>