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