OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polym
er.github.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/CO
NTRIBUTORS.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/P
ATENTS.txt | |
9 --> | |
10 <!doctype html> | |
11 <html> | |
12 <head> | |
13 | |
14 <title>core-layout-grid example</title> | |
15 | |
16 <script src="../platform/platform.js"></script> | |
17 | |
18 <link rel="import" href="core-layout-grid.html"> | |
19 | |
20 <style> | |
21 body { | |
22 font-family: sans-serif; | |
23 overflow: hidden; | |
24 } | |
25 </style> | |
26 | |
27 </head> | |
28 <body unresolved> | |
29 | |
30 <grid-test></grid-test> | |
31 | |
32 <polymer-element name="grid-test" on-tap="{{rotate}}"> | |
33 <template> | |
34 | |
35 <style> | |
36 * { | |
37 -webkit-transition: top, right, bottom, left; | |
38 -webkit-transition-duration: 0.3s; | |
39 } | |
40 | |
41 panel { | |
42 display: inline-block; | |
43 border: 4px dotted lightblue; | |
44 padding: 16px; | |
45 background-color: whitesmoke; | |
46 } | |
47 | |
48 #outputToolbar { | |
49 width: 400px; | |
50 } | |
51 | |
52 #output { | |
53 width: 400px; | |
54 } | |
55 | |
56 #workspace { | |
57 border-color: orange; | |
58 } | |
59 </style> | |
60 | |
61 <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid> | |
62 | |
63 <panel id="toolbar">toolbar (click to rotate)</panel> | |
64 <panel id="sidebar">sidebar</panel> | |
65 <panel id="workspace">workspace</panel> | |
66 <panel id="outputToolbar">otherbar</panel> | |
67 <panel id="output"> | |
68 output | |
69 <h2>Documentation</h2> | |
70 <h1>Verbiage</h1> | |
71 <p>In backbone record integer LED amplified internet protocol a extension
reflective. | |
72 Array kilohertz LED. Wavelength extension patch supporting wave an by prom
pt.</p> | |
73 </panel> | |
74 | |
75 </template> | |
76 <script> | |
77 | |
78 Polymer('grid-test', { | |
79 arrangements: [[ | |
80 [1, 1, 1, 1], | |
81 [2, 3, 3, 4], | |
82 [2, 3, 3, 5] | |
83 ], [ | |
84 [4, 3, 2], | |
85 [5, 3, 2], | |
86 [5, 1, 1] | |
87 ], [ | |
88 [1, 1], | |
89 [2, 3], | |
90 [4, 3] | |
91 ]], | |
92 | |
93 outputLayout: 0, | |
94 | |
95 ready: function() { | |
96 this.outputLayoutChanged(); | |
97 }, | |
98 | |
99 outputLayoutChanged: function() { | |
100 this.layout = this.arrangements[this.outputLayout]; | |
101 }, | |
102 | |
103 toggleLayout: function() { | |
104 this.outputLayout = (this.outputLayout + 1) % this.arrangements.length; | |
105 }, | |
106 | |
107 rotate: function() { | |
108 this.toggleLayout(); | |
109 } | |
110 }); | |
111 | |
112 </script> | |
113 </polymer-element> | |
114 | |
115 </body> | |
116 </html> | |
OLD | NEW |