src/third_party/polymer/components-chromium/core-selection/core-selection.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <!--
  10 @group Polymer Core Elements
  11
  12 The `<core-selection>` element is used to manage selection state. It has no
  13 visual appearance and is typically used in conjunction with another element.
  14 For example, [core-selector](#core-selector)
  15 use a `<core-selection>` to manage selection.
  16
  17 To mark an item as selected, call the `select(item)` method on
  18 `<core-selection>`. The item itself is an argument to this method.
  19
  20 The `<core-selection>`element manages selection state for any given set of
  21 items. When an item is selected, the `core-select` event is fired.
  22
  23 The attribute `multi` indicates if multiple items can be selected at once.
  24
  25 Example:
  26
  27     <polymer-element name="selection-example">
  28        <template>
  29          <style>
  30            polyfill-next-selector { content: ':host > .selected'; }
  31            ::content > .selected {
  32              font-weight: bold;
  33              font-style: italic;
  34            }
  35          </style>
  36          <ul on-tap="{{itemTapAction}}">
  37            <content></content>
  38          </ul>
  39          <core-selection id="selection" multi
  40                          on-core-select="{{selectAction}}"></core-selection>
  41        </template>
  42        <script>
  43          Polymer('selection-example', {
  44            itemTapAction: function(e, detail, sender) {
  45              this.$.selection.select(e.target);
  46            },
  47            selectAction: function(e, detail, sender) {
  48              detail.item.classList.toggle('selected', detail.isSelected);
  49            }
  50          });
  51        </script>
  52     </polymer-element>
  53
  54     <selection-example>
  55       <li>Red</li>
  56       <li>Green</li>
  57       <li>Blue</li>
  58     </selection-example>
  59
  60 @element core-selection
  61 -->
  62
  63 <!--
  64 Fired when an item's selection state is changed. This event is fired both
  65 when an item is selected or deselected. The `isSelected` detail property
  66 contains the selection state.
  67
  68 @event core-select
  69 @param {Object} detail
  70   @param {boolean} detail.isSelected true for selection and false for de-selection
  71   @param {Object} detail.item the item element
  72 -->
  73 <link rel="import" href="../polymer/polymer.html">
  74
  75 <polymer-element name="core-selection" attributes="multi" hidden assetpath="">
  76
  77 </polymer-element>
  78 <script src="core-selection-extracted.js"></script>