Mechanical rename of base::debug -> base::trace_event [final pass]
[chromium-blink-merge.git] / third_party / polymer / components-chromium / core-layout-grid / demo.html
blobd291ea027d5d432502255d5f1e41d68f6d723818
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>
14 <title>core-layout-grid example</title>
16 <script src="../webcomponentsjs/webcomponents.js"></script>
18 <link rel="import" href="core-layout-grid.html">
20 <style>
21 body {
22 font-family: sans-serif;
23 overflow: hidden;
25 </style>
27 </head>
28 <body unresolved>
30 <grid-test></grid-test>
32 <polymer-element name="grid-test" on-tap="{{rotate}}">
33 <template>
35 <style>
36 * {
37 -webkit-transition: top, right, bottom, left;
38 -webkit-transition-duration: 0.3s;
41 panel {
42 display: inline-block;
43 border: 4px dotted lightblue;
44 padding: 16px;
45 background-color: whitesmoke;
48 #outputToolbar {
49 width: 400px;
52 #output {
53 width: 400px;
56 #workspace {
57 border-color: orange;
59 </style>
61 <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>
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>
75 </template>
76 <script>
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 ]],
93 outputLayout: 0,
95 ready: function() {
96 this.outputLayoutChanged();
99 outputLayoutChanged: function() {
100 this.layout = this.arrangements[this.outputLayout];
103 toggleLayout: function() {
104 this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
107 rotate: function() {
108 this.toggleLayout();
112 </script>
113 </polymer-element>
115 </body>
116 </html>