| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| <html> |
| <head> |
| <title>Selection</title> |
| <script src="../webcomponentsjs/webcomponents.js"></script> |
| <link rel="import" href="core-selection.html"> |
| </head> |
| <body unresolved> |
| |
| <polymer-element name="selection-example"> |
| <template> |
| <style> |
| polyfill-next-selector { content: 'ul > *'; } |
| ::content > * { |
| cursor: pointer; |
| } |
| |
| polyfill-next-selector { content: 'ul > .selected'; } |
| ::content > .selected { |
| font-weight: bold; |
| font-style: italic; |
| } |
| </style> |
| |
| <ul on-tap="{{itemTapAction}}"> |
| <content></content> |
| </ul> |
| |
| <core-selection id="selection" multi on-core-select="{{selectAction}}"></core-selection> |
| |
| </template> |
| <script> |
| Polymer('selection-example', { |
| itemTapAction: function(e, detail, sender) { |
| this.$.selection.select(e.target); |
| }, |
| selectAction: function(e, detail, sender) { |
| 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> |
