OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Selection</title> |
| 5 <script src="../platform/platform.js"></script> |
| 6 <link rel="import" href="polymer-selection.html"> |
| 7 </head> |
| 8 <body> |
| 9 <polymer-element name="selection-example"> |
| 10 <template> |
| 11 <style> |
| 12 /* @polyfill ul > * */ |
| 13 ::-webkit-distributed(> *) { |
| 14 cursor: pointer; |
| 15 } |
| 16 |
| 17 /* @polyfill ul > .selected */ |
| 18 ::-webkit-distributed(> .selected) { |
| 19 font-weight: bold; |
| 20 font-style: italic; |
| 21 } |
| 22 </style> |
| 23 <ul on-tap="{{itemTapAction}}"> |
| 24 <content></content> |
| 25 </ul> |
| 26 <polymer-selection id="selection" multi on-polymer-select="{{selectAction}}"
></polymer-selection> |
| 27 </template> |
| 28 <script> |
| 29 Polymer('selection-example', { |
| 30 itemTapAction: function(e) { |
| 31 this.$.selection.select(e.target); |
| 32 }, |
| 33 selectAction: function(e, detail) { |
| 34 detail.item.classList.toggle('selected', detail.isSelected); |
| 35 } |
| 36 }); |
| 37 </script> |
| 38 </polymer-element> |
| 39 |
| 40 <selection-example> |
| 41 <li>Red</li> |
| 42 <li>Green</li> |
| 43 <li>Blue</li> |
| 44 </selection-example> |
| 45 |
| 46 </body> |
| 47 </html> |
OLD | NEW |