| OLD | NEW |
| 1 /** | 1 /** |
| 2 `iron-selector` is an element which can be used to manage a list of elements | 2 `iron-selector` is an element which can be used to manage a list of elements |
| 3 that can be selected. Tapping on the item will make the item selected. The `
selected` indicates | 3 that can be selected. Tapping on the item will make the item selected. The `
selected` indicates |
| 4 which item is being selected. The default is to use the index of the item. | 4 which item is being selected. The default is to use the index of the item. |
| 5 | 5 |
| 6 Example: | 6 Example: |
| 7 | 7 |
| 8 <iron-selector selected="0"> | 8 <iron-selector selected="0"> |
| 9 <div>Item 1</div> | 9 <div>Item 1</div> |
| 10 <div>Item 2</div> | 10 <div>Item 2</div> |
| 11 <div>Item 3</div> | 11 <div>Item 3</div> |
| 12 </iron-selector> | 12 </iron-selector> |
| 13 | 13 |
| 14 If you want to use the attribute value of an element for `selected` instead of
the index, | 14 If you want to use the attribute value of an element for `selected` instead of
the index, |
| 15 set `attrForSelected` to the name of the attribute. For example, if you want
to select item by | 15 set `attrForSelected` to the name of the attribute. For example, if you want
to select item by |
| 16 `name`, set `attrForSelected` to `name`. | 16 `name`, set `attrForSelected` to `name`. |
| 17 | 17 |
| 18 Example: | 18 Example: |
| 19 | 19 |
| 20 <iron-selector attr-for-selected="name" selected="foo"> | 20 <iron-selector attr-for-selected="name" selected="foo"> |
| 21 <div name="foo">Foo</div> | 21 <div name="foo">Foo</div> |
| 22 <div name="bar">Bar</div> | 22 <div name="bar">Bar</div> |
| 23 <div name="zot">Zot</div> | 23 <div name="zot">Zot</div> |
| 24 </iron-selector> | 24 </iron-selector> |
| 25 | 25 |
| 26 If no matching element is found using `attForSelected`, use `fallbackSelection
` as fallback. |
| 27 |
| 28 Example: |
| 29 |
| 30 <iron-selector attr-for-selected="name" selected="non-existing" |
| 31 fallback-selection="default"> |
| 32 <div name="foo">Foo</div> |
| 33 <div name="bar">Bar</div> |
| 34 <div name="default">Default</div> |
| 35 </iron-selector> |
| 36 |
| 37 Note: When the selector is multi, the selection will set to `fallbackSelection
` iff |
| 38 the number of matching elements is zero. |
| 39 |
| 26 `iron-selector` is not styled. Use the `iron-selected` CSS class to style the
selected element. | 40 `iron-selector` is not styled. Use the `iron-selected` CSS class to style the
selected element. |
| 27 | 41 |
| 28 Example: | 42 Example: |
| 29 | 43 |
| 30 <style> | 44 <style> |
| 31 .iron-selected { | 45 .iron-selected { |
| 32 background: #eee; | 46 background: #eee; |
| 33 } | 47 } |
| 34 </style> | 48 </style> |
| 35 | 49 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 46 | 60 |
| 47 Polymer({ | 61 Polymer({ |
| 48 | 62 |
| 49 is: 'iron-selector', | 63 is: 'iron-selector', |
| 50 | 64 |
| 51 behaviors: [ | 65 behaviors: [ |
| 52 Polymer.IronMultiSelectableBehavior | 66 Polymer.IronMultiSelectableBehavior |
| 53 ] | 67 ] |
| 54 | 68 |
| 55 }); | 69 }); |
| OLD | NEW |