| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Selector</title> |
| <script src="../platform/platform.js"></script> |
| <link rel="import" href="polymer-selector.html"> |
| </head> |
| <body unresolved> |
| <polymer-element name="selector-examples"> |
| <template> |
| <style> |
| .list { |
| display: block; |
| border: 1px solid #ccc; |
| border-bottom: none; |
| background: #666; |
| color: white; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .list > * { |
| height: 40px; |
| line-height: 40px; |
| padding: 0 20px; |
| border-bottom: 1px solid #ccc; |
| } |
| |
| .list > *.polymer-selected { |
| background: #333; |
| } |
| |
| li { |
| height: 30px; |
| } |
| |
| li.polymer-selected:after { |
| content: "\2713"; |
| position: absolute; |
| padding-left: 10px; |
| } |
| </style> |
| |
| <h2>basic</h2> |
| <polymer-selector class="list" selected="0"> |
| <div>Item 0</div> |
| <div>Item 1</div> |
| <div>Item 2</div> |
| <div>Item 3</div> |
| <div>Item 4</div> |
| </polymer-selector> |
| |
| <h2>multi-selection</h2> |
| <polymer-selector class="list" selected="{{multiSelected}}" multi> |
| <div>Item 0</div> |
| <div>Item 1</div> |
| <div>Item 2</div> |
| <div>Item 3</div> |
| <div>Item 4</div> |
| </polymer-selector> |
| |
| <h2>list</h2> |
| <polymer-selector target="{{$.list}}" selected="0"></polymer-selector> |
| <ul id="list"> |
| <li>Item 0</li> |
| <li>Item 1</li> |
| <li>Item 2</li> |
| <li>Item 3</li> |
| <li>Item 4</li> |
| </ul> |
| |
| <h2>binding of a group of radio buttons to a variable</h2> |
| <polymer-selector target="{{$.myForm}}" itemsSelector="input[type=radio]" |
| selected="{{color}}" valueattr="value" selectedProperty="checked" |
| activateEvent="change"></polymer-selector> |
| <form id="myForm"> |
| <label><input type="radio" name="color" value="red"> Red</label> <br> |
| <label><input type="radio" name="color" value="green"> Green</label> <br> |
| <label><input type="radio" name="color" value="blue"> Blue</label> <br> |
| <p>color = {{color}}</p> |
| </form> |
| |
| </template> |
| |
| <script> |
| Polymer('selector-examples', { |
| ready: function() { |
| this.multiSelected = [1, 3]; |
| this.color = 'green'; |
| } |
| }); |
| </script> |
| </polymer-element> |
| |
| <selector-examples></selector-examples> |
| </body> |
| </html> |
