117 lines
2.6 KiB
HTML
117 lines
2.6 KiB
HTML
|
<!--
|
||
|
|
@license
|
||
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||
|
|
Code distributed by Google as part of the polymer project is also
|
||
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||
|
|
-->
|
||
|
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>core-layout-grid example</title>
|
||
|
|
|
||
|
|
<script src="../webcomponentsjs/webcomponents.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>
|