| Index: third_party/polymer/components/core-layout-grid/demo.html
|
| diff --git a/third_party/polymer/components/core-layout-grid/demo.html b/third_party/polymer/components/core-layout-grid/demo.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c03fb4ee790b285114effc2144dcd32652194495
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/core-layout-grid/demo.html
|
| @@ -0,0 +1,107 @@
|
| +<!doctype html>
|
| +<html>
|
| +<head>
|
| +
|
| + <title>core-layout-grid example</title>
|
| +
|
| + <script src="../platform/platform.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>
|
|
|
Chromium Code Reviews
Issue 582873003:
Polymer elements added to third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master