<!-- @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.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 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.txt --> <!doctype html> <html> <head> <title>iron-list demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <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"> <link rel="import" href="../../iron-ajax/iron-ajax.html"> <link rel="import" href="../../iron-icon/iron-icon.html"> <link rel="import" href="../../iron-icons/iron-icons.html"> <link rel="import" href="../../paper-toolbar/paper-toolbar.html"> <dom-module id="x-app"> <style> :host { @apply(--layout-fit); @apply(--layout-vertical); display: block; font-family: sans-serif; } .toolbar { background: #E91E63; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); color: white; } #list { @apply(--layout-flex); } .item { padding: 16px; @apply(--layout-horizontal); } .avatar { height: 40px; width: 40px; border-radius: 20px; box-sizing: border-box; border: 1px solid #DDD; background-color: #DDD; } .pad { padding: 0 16px; @apply(--layout-flex); @apply(--layout-vertical); } .primary { font-size: 16px; } .secondary { font-size: 14px; } .dim { color: gray; } .border { margin-left: 72px; border-bottom: 1px solid #DDD; } iron-icon { width: 24px; height: 24px; } </style> <template> <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax> <paper-toolbar class="toolbar"> <div>Inbox</div> </paper-toolbar> <iron-list id="list" items="[[data]]" as="item"> <template> <div> <div class="item"> <img class="avatar" src="[[item.image]]"> <div class="pad"> <div class="primary"> <span>[[index]]</span> <span>[[item.name]]</span> </div> <div class="secondary">[[item.shortText]]</div> <div class="secondary dim">[[item.longText]]</div> </div> <iron-icon icon$="[[iconForItem(item)]]"></iron-icon> </div> <div class="border"></div> </div> </template> </iron-list> </template> </dom-module> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-app', iconForItem: function(item) { return item ? (item.integer < 50 ? 'star-border' : 'star') : ''; } }); }); </script> </head> <body unresolved> <x-app></x-app> </body> </html>