third_party/polymer/components-chromium/core-style/demo.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9   <title>core-style</title>
  10   <script src="../webcomponentsjs/webcomponents.js"></script>
  11
  12   <link rel="import" href="elements.html">
  13   <link rel="import" href="my-theme.html">
  14
  15 </head>
  16 <body unresolved fullbleed vertical layout>
  17   <core-style ref="main"></core-style>
  18
  19   <template is="auto-binding">
  20     <my-toolbar>
  21       <span flex>core-style</span>
  22       <input type="color" value="{{g.theme.colorOne}}">
  23       <input type="color" value="{{g.theme.colorTwo}}">
  24       <input type="color" value="{{g.theme.colorThree}}">
  25       <input type="range" min="1" max="8" value="{{g.columns}}">
  26       <button>A button</button>
  27     </my-toolbar>
  28     <section flex horizontal wrap layout>
  29       <template repeat="{{item in items}}">
  30         <my-panel>{{item}}</my-panel>
  31       </template>
  32     </section>
  33   </template>
  34
  35   <script>
  36   (function() {
  37
  38     addEventListener('polymer-ready', function() {
  39       var items = [];
  40         for (var i=0; i < 100; i++) {
  41           items.push(i);
  42         }
  43
  44       CoreStyle.g.items = items;
  45
  46       addEventListener('template-bound', function(e) {
  47         e.target.g = CoreStyle.g;
  48         e.target.items = items;
  49       });
  50     });
  51
  52   })();
  53   </script>
  54
  55 </body>
  56 </html>
  57
  58