Index: polymer_0.5.0/bower_components/core-list/demos/demo-grid.html |
diff --git a/polymer_0.5.0/bower_components/core-list/demos/demo-grid.html b/polymer_0.5.0/bower_components/core-list/demos/demo-grid.html |
new file mode 100755 |
index 0000000000000000000000000000000000000000..57b009dd499086279c7449d2c11a0d76a6802790 |
--- /dev/null |
+++ b/polymer_0.5.0/bower_components/core-list/demos/demo-grid.html |
@@ -0,0 +1,98 @@ |
+<!doctype html> |
+<!-- |
+Copyright (c) 2014 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 |
+--> |
+<html> |
+<head> |
+ <title>core-list</title> |
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
+ <script src="../../webcomponentsjs/webcomponents.js"></script> |
+ <link rel="import" href="../core-list.html"> |
+ <link rel="import" href="../../core-ajax/core-ajax.html"> |
+ <link rel="import" href="../../core-image/core-image.html"> |
+ <style> |
+ html, body { |
+ margin: 0; |
+ -webkit-tap-highlight-color: transparent; |
+ overflow: hidden; |
+ user-select: none; |
+ -webkit-user-select: none; |
+ } |
+ |
+ list-test { |
+ display: block; |
+ height: 100%; |
+ margin: 0 auto; |
+ } |
+ </style> |
+</head> |
+<body fit> |
+ |
+<list-test></list-test> |
+ |
+<polymer-element name="list-test" layout vertical center-center relative> |
+<template> |
+ <style> |
+ .item { |
+ box-sizing: border-box; |
+ padding: 10px; |
+ overflow: hidden; |
+ color: black; |
+ } |
+ .item > core-image { |
+ height: 150px; |
+ width: 150px; |
+ background-color: lightgray; |
+ } |
+ .item.selected { |
+ background:yellow; |
+ } |
+ .divider { |
+ padding-top: 40px; |
+ font-size: 4em; |
+ } |
+ |
+ </style> |
+ |
+ <core-list id="list" data="{{data}}" fit grid width="172"> |
+ <template> |
+ <div class="item {{selected ? 'selected' : ''}}"> |
+ <core-image id="image" src="{{model.image}}" preload></core-image> |
+ <div>{{model.caption}}</div> |
+ </div> |
+ </template> |
+ </core-list> |
+</template> |
+<script> |
+(function() { |
+ |
+ Polymer('list-test', { |
+ ready: function() { |
+ window.list = this.$.list; |
+ var data = []; |
+ var groups = []; |
+ var gidx = 0; |
+ var gitem = 0; |
+ var gmax = 3; |
+ for (var i=0; i<1000; i++) { |
+ var color = Math.floor(Math.random()*0xFFFFFF).toString(16); |
+ data.push({ |
+ image: 'http://placehold.it/150x150/' + color + '/ffffff&text=Index%20' + i, |
+ caption: 'Caption ' + i, |
+ color: color |
+ }); |
+ } |
+ this.data = data; |
+ } |
+ }); |
+})(); |
+</script> |
+</polymer-element> |
+ |
+</body> |
+</html> |