Index: pkg/polymer/lib/elements/polymer-grid-layout/demo.html |
diff --git a/pkg/polymer/lib/elements/polymer-grid-layout/demo.html b/pkg/polymer/lib/elements/polymer-grid-layout/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b1c8db2cb5552147174e8e6a02f5399191546550 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-grid-layout/demo.html |
@@ -0,0 +1,87 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ <title>polymer-grid-layout example</title> |
+ <script src="../platform/platform.js"></script> |
+ <link href="polymer-grid-layout.html" rel="import"> |
+ <style> |
+ body { |
+ font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
+ } |
+ </style> |
+</head> |
+<body unresolved> |
+ <grid-test></grid-test> |
+ |
+ <polymer-element name="grid-test"> |
+ <template> |
+ <polymer-grid-layout nodes="{{nodes}}" layout="{{layout}}"></polymer-grid-layout> |
+ |
+ <panel id="toolbar">toolbar</panel> |
+ <panel id="sidebar" v-flex>sidebar</panel> |
+ <panel id="workspace" flex>workspace</panel> |
+ <panel id="outputToolbar">otherbar</panel> |
+ <panel id="output" v-flex> |
+ output |
+ <h2>Documentation</h2> |
+ <h1>Verbiage</h1> |
+ <p>In backbone record integer LED amplified internet protocol a extension reflective. |
+ Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p> |
+ </panel> |
+ |
+ <style> |
+ * { |
+ -webkit-transition: top, right, bottom, left; |
+ -webkit-transition-duration: 0.3s; |
+ } |
+ panel { |
+ display: inline-block; |
+ border: 4px dotted lightblue; |
+ padding: 16px; |
+ } |
+ #outputToolbar { |
+ width: 400px; |
+ } |
+ #output { |
+ width: 400px; |
+ } |
+ #workspace { |
+ border-color: orange; |
+ } |
+ </style> |
+ </template> |
+ <script> |
+ Polymer('grid-test', { |
+ arrangements: [[ |
+ [1, 1, 1], |
+ [2, 3, 4], |
+ [2, 3, 5] |
+ ], [ |
+ [4, 3, 2], |
+ [5, 3, 2], |
+ [5, 1, 1] |
+ ], [ |
+ [1, 1], |
+ [2, 3], |
+ [4, 3] |
+ ]], |
+ outputLayout: 0, |
+ ready: function() { |
+ //this.nodes = [ |
+ // this.$.toolbar, this.$.sidebar, this.$.workspace, |
+ // this.$.outputToolbar, this.$.output |
+ //]; |
+ this.outputLayoutChanged(); |
+ //setInterval(this.toggleLayout.bind(this), 2500); |
+ }, |
+ outputLayoutChanged: function() { |
+ this.layout = this.arrangements[this.outputLayout]; |
+ }, |
+ toggleLayout: function() { |
+ this.outputLayout = (this.outputLayout + 1) % this.arrangements.length; |
+ } |
+ }); |
+ </script> |
+ </polymer-element> |
+</body> |
+</html> |