third_party/polymer/components/core-selector/demo.html

   1 <!DOCTYPE html>
   2 <!--
   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 <html>
  11 <head>
  12   <title>Selector</title>
  13   <script src="../webcomponentsjs/webcomponents.js"></script>
  14   <link rel="import" href="core-selector.html">
  15 </head>
  16 <body unresolved>
  17   <polymer-element name="selector-examples">
  18     <template>
  19       <style>
  20         .list {
  21           display: block;
  22           border: 1px solid #ccc;
  23           border-bottom: none;
  24           background: #666;
  25           color: white;
  26           list-style: none;
  27           margin: 0;
  28           padding: 0;
  29         }
  30
  31         .list > * {
  32           height: 40px;
  33           line-height: 40px;
  34           padding: 0 20px;
  35           border-bottom: 1px solid #ccc;
  36         }
  37
  38         .list > *.core-selected {
  39           background: #333;
  40         }
  41
  42         li {
  43           height: 30px;
  44         }
  45
  46         li.core-selected:after {
  47           content: "\2713";
  48           position: absolute;
  49           padding-left: 10px;
  50         }
  51       </style>
  52
  53       <h2>basic</h2>
  54       <core-selector class="list" selected="0">
  55         <div>Item 0</div>
  56         <div>Item 1</div>
  57         <div>Item 2</div>
  58         <div>Item 3</div>
  59         <div>Item 4</div>
  60       </core-selector>
  61
  62       <h2>multi-selection</h2>
  63       <core-selector class="list" selected="{{multiSelected}}" multi>
  64         <div>Item 0</div>
  65         <div>Item 1</div>
  66         <div>Item 2</div>
  67         <div>Item 3</div>
  68         <div>Item 4</div>
  69       </core-selector>
  70
  71       <h2>list</h2>
  72       <core-selector target="{{$.list}}" selected="0"></core-selector>
  73       <ul id="list">
  74         <li>Item 0</li>
  75         <li>Item 1</li>
  76         <li>Item 2</li>
  77         <li>Item 3</li>
  78         <li>Item 4</li>
  79       </ul>
  80
  81       <h2>binding of a group of radio buttons to a variable</h2>
  82       <core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"
  83           selected="{{color}}" valueattr="value" selectedProperty="checked"
  84           activateEvent="change"></core-selector>
  85       <form id="myForm">
  86         <label><input type="radio" name="color" value="red"> Red</label> <br>
  87         <label><input type="radio" name="color" value="green"> Green</label> <br>
  88         <label><input type="radio" name="color" value="blue"> Blue</label> <br>
  89         <p>color = {{color}}</p>
  90       </form>
  91
  92     </template>
  93
  94     <script>
  95       Polymer('selector-examples', {
  96         ready: function() {
  97           this.multiSelected = [1, 3];
  98           this.color = 'green';
  99         }
 100       });
 101     </script>
 102   </polymer-element>
 103
 104   <selector-examples></selector-examples>
 105 </body>
 106 </html>