| 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>
|
|
|