third_party/polymer/polymer-selector/index.html

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