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

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13
  14   <title>core-layout-grid example</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link rel="import" href="core-layout-grid.html">
  19
  20   <style>
  21     body {
  22       font-family: sans-serif;
  23       overflow: hidden;
  24     }
  25   </style>
  26
  27 </head>
  28 <body unresolved>
  29
  30   <grid-test></grid-test>
  31
  32   <polymer-element name="grid-test" on-tap="{{rotate}}">
  33   <template>
  34
  35     <style>
  36       * {
  37         -webkit-transition: top, right, bottom, left;
  38         -webkit-transition-duration: 0.3s;
  39       }
  40
  41       panel {
  42         display: inline-block;
  43         border: 4px dotted lightblue;
  44         padding: 16px;
  45         background-color: whitesmoke;
  46       }
  47
  48       #outputToolbar {
  49         width: 400px;
  50       }
  51
  52       #output {
  53         width: 400px;
  54       }
  55
  56       #workspace {
  57         border-color: orange;
  58       }
  59     </style>
  60
  61     <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>
  62
  63     <panel id="toolbar">toolbar (click to rotate)</panel>
  64     <panel id="sidebar">sidebar</panel>
  65     <panel id="workspace">workspace</panel>
  66     <panel id="outputToolbar">otherbar</panel>
  67     <panel id="output">
  68       output
  69       <h2>Documentation</h2>
  70       <h1>Verbiage</h1>
  71       <p>In backbone record integer LED amplified internet protocol a extension reflective.
  72       Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
  73     </panel>
  74
  75   </template>
  76   <script>
  77
  78     Polymer('grid-test', {
  79       arrangements: [[
  80         [1, 1, 1, 1],
  81         [2, 3, 3, 4],
  82         [2, 3, 3, 5]
  83       ], [
  84         [4, 3, 2],
  85         [5, 3, 2],
  86         [5, 1, 1]
  87       ], [
  88         [1, 1],
  89         [2, 3],
  90         [4, 3]
  91       ]],
  92
  93       outputLayout: 0,
  94
  95       ready: function() {
  96         this.outputLayoutChanged();
  97       },
  98
  99       outputLayoutChanged: function() {
 100         this.layout = this.arrangements[this.outputLayout];
 101       },
 102
 103       toggleLayout: function() {
 104         this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
 105       },
 106
 107       rotate: function() {
 108         this.toggleLayout();
 109       }
 110     });
 111
 112   </script>
 113   </polymer-element>
 114
 115 </body>
 116 </html>