third_party/polymer/components/core-selection/demo.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>Selection</title>
  13   <script src="../webcomponentsjs/webcomponents.js"></script>
  14   <link rel="import" href="core-selection.html">
  15 </head>
  16 <body unresolved>
  17
  18   <polymer-element name="selection-example">
  19     <template>
  20       <style>
  21         polyfill-next-selector { content: 'ul > *'; }
  22         ::content > * {
  23           cursor: pointer;
  24         }
  25
  26         polyfill-next-selector { content: 'ul > .selected'; }
  27         ::content > .selected {
  28           font-weight: bold;
  29           font-style: italic;
  30         }
  31       </style>
  32
  33       <ul on-tap="{{itemTapAction}}">
  34         <content></content>
  35       </ul>
  36
  37       <core-selection id="selection" multi on-core-select="{{selectAction}}"></core-selection>
  38
  39     </template>
  40     <script>
  41     Polymer('selection-example', {
  42       itemTapAction: function(e, detail, sender) {
  43         this.$.selection.select(e.target);
  44       },
  45       selectAction: function(e, detail, sender) {
  46         detail.item.classList.toggle('selected', detail.isSelected);
  47       }
  48     });
  49     </script>
  50   </polymer-element>
  51
  52   <selection-example>
  53     <li>Red</li>
  54     <li>Green</li>
  55     <li>Blue</li>
  56   </selection-example>
  57
  58 </body>
  59 </html>