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 @group Polymer Core Elements
  10
  11 The `<core-selection>` element is used to manage selection state. It has no
  12 visual appearance and is typically used in conjunction with another element.
  13 For example, [core-selector](#core-selector)
  14 uses a `<core-selection>` to manage selection.
  15
  16 To mark an item as selected, call the `select(item)` method on
  17 `<core-selection>`. The item itself is an argument to this method.
  18
  19 The `<core-selection>`element manages selection state for any given set of
  20 items. When an item is selected, the `core-select` event is fired.
  21
  22 The attribute `multi` indicates if multiple items can be selected at once.
  23
  24 Example:
  25
  26     <polymer-element name="selection-example">
  27        <template>
  28          <style>
  29            polyfill-next-selector { content: ':host > .selected'; }
  30            ::content > .selected {
  31              font-weight: bold;
  32              font-style: italic;
  33            }
  34          </style>
  35          <ul on-tap="{{itemTapAction}}">
  36            <content></content>
  37          </ul>
  38          <core-selection id="selection" multi
  39                          on-core-select="{{selectAction}}"></core-selection>
  40        </template>
  41        <script>
  42          Polymer('selection-example', {
  43            itemTapAction: function(e, detail, sender) {
  44              this.$.selection.select(e.target);
  45            },
  46            selectAction: function(e, detail, sender) {
  47              detail.item.classList.toggle('selected', detail.isSelected);
  48            }
  49          });
  50        </script>
  51     </polymer-element>
  52
  53     <selection-example>
  54       <li>Red</li>
  55       <li>Green</li>
  56       <li>Blue</li>
  57     </selection-example>
  58
  59 @element core-selection
  60 --><!--
  61 Fired when an item's selection state is changed. This event is fired both
  62 when an item is selected or deselected. The `isSelected` detail property
  63 contains the selection state.
  64
  65 @event core-select
  66 @param {Object} detail
  67   @param {boolean} detail.isSelected true for selection and false for de-selection
  68   @param {Object} detail.item the item element
  69 --><html><head><link rel="import" href="../polymer/polymer.html">
  70
  71 </head><body><polymer-element name="core-selection" attributes="multi" hidden="" assetpath="">
  72
  73 </polymer-element>
  74 <script charset="utf-8" src="core-selection-extracted.js"></script></body></html>