list-demo.html
4.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--
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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="list-view.html">
<link rel="import" href="full-view.html">
<dom-module id="list-demo">
<template>
<style>
:host {
display: block;
}
neon-animated-pages {
height: 100%;
}
</style>
<neon-animated-pages id="pages" selected="0">
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
</neon-animated-pages>
</template>
</dom-module>
<script>
Polymer({
is: 'list-demo',
properties: {
fileData: {
type: Array,
value: function() {
return [
{fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'}
]
}
}
},
_onItemClick: function() {
this.$.pages.selected = 1;
},
_onClose: function() {
this.$.pages.selected = 0;
}
});
</script>