Index: samples/third_party/todomvc_performance/js_todomvc/components/polymer-selection/demo.html |
diff --git a/samples/third_party/todomvc_performance/js_todomvc/components/polymer-selection/demo.html b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-selection/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c7994a21475dc4ab2e672570ed380ecfcc7dd370 |
--- /dev/null |
+++ b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-selection/demo.html |
@@ -0,0 +1,47 @@ |
+<!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> |