| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> |
| 10 |
| 11 <!doctype html> |
| 12 <html> |
| 13 <head> |
| 14 |
| 15 <title>iron-list demo</title> |
| 16 |
| 17 <meta charset="utf-8"> |
| 18 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 19 |
| 20 <script src="../../../webcomponentsjs/webcomponents-lite.js"></script> |
| 21 |
| 22 <link rel="import" href="../../../polymer/polymer.html"> |
| 23 <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> |
| 24 <link rel="import" href="../../iron-list.html"> |
| 25 <link rel="import" href="dummy-data.html"> |
| 26 |
| 27 <dom-module id="x-app"> |
| 28 <style> |
| 29 |
| 30 :host { |
| 31 display: block; |
| 32 font-family: sans-serif; |
| 33 @apply(--layout-horizontal); |
| 34 } |
| 35 |
| 36 iron-list { |
| 37 @apply(--layout-flex); |
| 38 } |
| 39 |
| 40 .item { |
| 41 display: block; |
| 42 padding: 8px; |
| 43 border-bottom: 1px solid gray; |
| 44 @apply(--layout-horizontal); |
| 45 } |
| 46 |
| 47 .item img { |
| 48 height: 40px; |
| 49 width: 40px; |
| 50 } |
| 51 |
| 52 .picture { |
| 53 @apply(--layout-vertical); |
| 54 } |
| 55 |
| 56 #about { |
| 57 color: lightgray; |
| 58 font-style: italic; |
| 59 font-size: 0.8em; |
| 60 } |
| 61 |
| 62 #last { |
| 63 font-weight: bold; |
| 64 font-size: 1.2em; |
| 65 } |
| 66 |
| 67 .padded { |
| 68 @apply(--layout-flex); |
| 69 } |
| 70 |
| 71 .padded > * { |
| 72 padding: 8px; |
| 73 } |
| 74 |
| 75 #index { |
| 76 text-align: center; |
| 77 padding-top: 8px; |
| 78 } |
| 79 #options { |
| 80 background: white; |
| 81 border-radius: 10px; |
| 82 border: 1px solid gray; |
| 83 position: absolute; |
| 84 top: 5px; |
| 85 right: 5px; |
| 86 z-index: 10; |
| 87 padding: 5px; |
| 88 } |
| 89 #friends { |
| 90 height: 20px; |
| 91 } |
| 92 |
| 93 </style> |
| 94 <template> |
| 95 <div id="options"> |
| 96 <input value="{{separator::input}}" style="width:20px;"> |
| 97 <label><input type="checkbox" checked="{{showing::change}}">Show friends
</label> |
| 98 </div> |
| 99 |
| 100 <iron-list id="list1" items="{{data}}"> |
| 101 <template> |
| 102 <div class="item"> |
| 103 <div class="picture"> |
| 104 <img src="{{pictureForItem(item)}}"> |
| 105 <div>{{item.index}}</div> |
| 106 </div> |
| 107 <div class="padded"> |
| 108 <div> |
| 109 <input placeholder="name.last" value="{{item.name.last::input}}"
> |
| 110 <span>{{separator}}</span> |
| 111 <input placeholder="name.first" value="{{item.name.first::input}
}"> |
| 112 </div> |
| 113 <div>{{item.about}}</div> |
| 114 <div id="friends"> |
| 115 <template is="dom-if" if="{{showing}}"> |
| 116 <span><strong>Friends:</strong></span> |
| 117 <template is="dom-repeat" items="{{item.friends}}"> |
| 118 <span>{{item.name}}</span> |
| 119 <span>{{separator}}</span> |
| 120 </template> |
| 121 </template> |
| 122 </div> |
| 123 </div> |
| 124 </div> |
| 125 </template> |
| 126 </iron-list> |
| 127 |
| 128 <iron-list id="list2" items="{{data}}"> |
| 129 <template> |
| 130 <div class="item"> |
| 131 <div class="picture"> |
| 132 <img src="{{pictureForItem(item)}}"> |
| 133 <div>{{item.index}}</div> |
| 134 </div> |
| 135 <div class="padded"> |
| 136 <div> |
| 137 <input placeholder="name.last" value="{{item.name.last::input}}"
> |
| 138 <span>{{separator}}</span> |
| 139 <input placeholder="name.first" value="{{item.name.first::input}
}"> |
| 140 </div> |
| 141 <div>{{item.about}}</div> |
| 142 <div id="friends"> |
| 143 <template is="dom-if" if="{{showing}}"> |
| 144 <span><strong>Friends:</strong></span> |
| 145 <template is="dom-repeat" items="{{item.friends}}"> |
| 146 <span>{{item.name}}</span> |
| 147 <span>{{separator}}</span> |
| 148 </template> |
| 149 </template> |
| 150 </div> |
| 151 </div> |
| 152 </div> |
| 153 </template> |
| 154 </iron-list> |
| 155 |
| 156 </template> |
| 157 </dom-module> |
| 158 |
| 159 <script> |
| 160 |
| 161 HTMLImports.whenReady(function() { |
| 162 |
| 163 Polymer({ |
| 164 |
| 165 is: 'x-app', |
| 166 |
| 167 properties: { |
| 168 data: { |
| 169 value: window.dummyData |
| 170 }, |
| 171 separator: { |
| 172 value: '|' |
| 173 }, |
| 174 showing: { |
| 175 value: false |
| 176 } |
| 177 }, |
| 178 pictureForItem: function(item) { |
| 179 return item.picture + '/' + item.guid.slice(0,6); |
| 180 }, |
| 181 iconForItem: function(item) { |
| 182 return item.gender == 'female' ? 'star' : 'star-outline'; |
| 183 } |
| 184 }); |
| 185 |
| 186 }); |
| 187 |
| 188 </script> |
| 189 |
| 190 <style is="custom-style"> |
| 191 x-app { |
| 192 @apply(--layout-fit); |
| 193 } |
| 194 </style> |
| 195 |
| 196 </head> |
| 197 <body unresolved> |
| 198 |
| 199 <x-app class="flex"></x-app> |
| 200 |
| 201 </body> |
| 202 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1264073002:
Update polymer 1.0 install to pick up newly added elements. (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master