third_party/polymer/v1_0/components/iron-selector/iron-selector.html

   1 <!--
   2 Copyright (c) 2015 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
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="iron-multi-selectable.html">
  13
  14 <script>
  15   /**
  16   `iron-selector` is an element which can be used to manage a list of elements
  17   that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
  18   which item is being selected.  The default is to use the index of the item.
  19
  20   Example:
  21
  22       <iron-selector selected="0">
  23         <div>Item 1</div>
  24         <div>Item 2</div>
  25         <div>Item 3</div>
  26       </iron-selector>
  27
  28   If you want to use the attribute value of an element for `selected` instead of the index,
  29   set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
  30   `name`, set `attrForSelected` to `name`.
  31
  32   Example:
  33
  34       <iron-selector attr-for-selected="name" selected="foo">
  35         <div name="foo">Foo</div>
  36         <div name="bar">Bar</div>
  37         <div name="zot">Zot</div>
  38       </iron-selector>
  39
  40   `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
  41
  42   Example:
  43
  44       <style>
  45         .iron-selected {
  46           background: #eee;
  47         }
  48       </style>
  49
  50       ...
  51
  52       <iron-selector selected="0">
  53         <div>Item 1</div>
  54         <div>Item 2</div>
  55         <div>Item 3</div>
  56       </iron-selector>
  57
  58   @demo demo/index.html
  59   */
  60
  61   Polymer({
  62
  63     is: 'iron-selector',
  64
  65     behaviors: [
  66       Polymer.IronMultiSelectableBehavior
  67     ]
  68
  69   });
  70
  71 </script>