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 |