Index: third_party/polymer/components-chromium/core-layout-grid/demo.html |
diff --git a/third_party/polymer/components-chromium/core-layout-grid/demo.html b/third_party/polymer/components-chromium/core-layout-grid/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c03fb4ee790b285114effc2144dcd32652194495 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-layout-grid/demo.html |
@@ -0,0 +1,107 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ |
+ <title>core-layout-grid example</title> |
+ |
+ <script src="../platform/platform.js"></script> |
+ |
+ <link rel="import" href="core-layout-grid.html"> |
+ |
+ <style> |
+ body { |
+ font-family: sans-serif; |
+ overflow: hidden; |
+ } |
+ </style> |
+ |
+</head> |
+<body unresolved> |
+ |
+ <grid-test></grid-test> |
+ |
+ <polymer-element name="grid-test" on-tap="{{rotate}}"> |
+ <template> |
+ |
+ <style> |
+ * { |
+ -webkit-transition: top, right, bottom, left; |
+ -webkit-transition-duration: 0.3s; |
+ } |
+ |
+ panel { |
+ display: inline-block; |
+ border: 4px dotted lightblue; |
+ padding: 16px; |
+ background-color: whitesmoke; |
+ } |
+ |
+ #outputToolbar { |
+ width: 400px; |
+ } |
+ |
+ #output { |
+ width: 400px; |
+ } |
+ |
+ #workspace { |
+ border-color: orange; |
+ } |
+ </style> |
+ |
+ <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid> |
+ |
+ <panel id="toolbar">toolbar (click to rotate)</panel> |
+ <panel id="sidebar">sidebar</panel> |
+ <panel id="workspace">workspace</panel> |
+ <panel id="outputToolbar">otherbar</panel> |
+ <panel id="output"> |
+ 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> |
+ |
+ </template> |
+ <script> |
+ |
+ Polymer('grid-test', { |
+ arrangements: [[ |
+ [1, 1, 1, 1], |
+ [2, 3, 3, 4], |
+ [2, 3, 3, 5] |
+ ], [ |
+ [4, 3, 2], |
+ [5, 3, 2], |
+ [5, 1, 1] |
+ ], [ |
+ [1, 1], |
+ [2, 3], |
+ [4, 3] |
+ ]], |
+ |
+ outputLayout: 0, |
+ |
+ ready: function() { |
+ this.outputLayoutChanged(); |
+ }, |
+ |
+ outputLayoutChanged: function() { |
+ this.layout = this.arrangements[this.outputLayout]; |
+ }, |
+ |
+ toggleLayout: function() { |
+ this.outputLayout = (this.outputLayout + 1) % this.arrangements.length; |
+ }, |
+ |
+ rotate: function() { |
+ this.toggleLayout(); |
+ } |
+ }); |
+ |
+ </script> |
+ </polymer-element> |
+ |
+</body> |
+</html> |