| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Selection</title> |
| <script src="../platform/platform.js"></script> |
| <link rel="import" href="polymer-selection.html"> |
| </head> |
| <body> |
| <polymer-element name="selection-example"> |
| <template> |
| <style> |
| /* @polyfill ul > * */ |
| ::-webkit-distributed(> *) { |
| cursor: pointer; |
| } |
| |
| /* @polyfill ul > .selected */ |
| ::-webkit-distributed(> .selected) { |
| font-weight: bold; |
| font-style: italic; |
| } |
| </style> |
| <ul on-tap="{{itemTapAction}}"> |
| <content></content> |
| </ul> |
| <polymer-selection id="selection" multi on-polymer-select="{{selectAction}}"></polymer-selection> |
| </template> |
| <script> |
| Polymer('selection-example', { |
| itemTapAction: function(e) { |
| this.$.selection.select(e.target); |
| }, |
| selectAction: function(e, detail) { |
| detail.item.classList.toggle('selected', detail.isSelected); |
| } |
| }); |
| </script> |
| </polymer-element> |
| |
| <selection-example> |
| <li>Red</li> |
| <li>Green</li> |
| <li>Blue</li> |
| </selection-example> |
| |
| </body> |
| </html> |
