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