src/third_party/polymer/components/core-layout-grid/demo.html

   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 prompt.</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>