OLD | NEW |
1 iron-selector | 1 iron-selector |
2 ============= | 2 ============= |
| 3 |
| 4 `iron-selector` is an element which can be used to manage a list of elements |
| 5 that can be selected. Tapping on the item will make the item selected. The `se
lected` indicates |
| 6 which item is being selected. The default is to use the index of the item. |
| 7 |
| 8 Example: |
| 9 |
| 10 ```html |
| 11 <iron-selector selected="0"> |
| 12 <div>Item 1</div> |
| 13 <div>Item 2</div> |
| 14 <div>Item 3</div> |
| 15 </iron-selector> |
| 16 ``` |
| 17 |
| 18 If you want to use the attribute value of an element for `selected` instead of t
he index, |
| 19 set `attrForSelected` to the name of the attribute. For example, if you want to
select item by |
| 20 `name`, set `attrForSelected` to `name`. |
| 21 |
| 22 Example: |
| 23 |
| 24 ```html |
| 25 <iron-selector attr-for-selected="name" selected="foo"> |
| 26 <div name="foo">Foo</div> |
| 27 <div name="bar">Bar</div> |
| 28 <div name="zot">Zot</div> |
| 29 </iron-selector> |
| 30 ``` |
| 31 |
| 32 `iron-selector` is not styled. Use the `iron-selected` CSS class to style the se
lected element. |
| 33 |
| 34 Example: |
| 35 |
| 36 ```html |
| 37 <style> |
| 38 .iron-selected { |
| 39 background: #eee; |
| 40 } |
| 41 </style> |
| 42 |
| 43 ... |
| 44 |
| 45 <iron-selector selected="0"> |
| 46 <div>Item 1</div> |
| 47 <div>Item 2</div> |
| 48 <div>Item 3</div> |
| 49 </iron-selector> |
| 50 ``` |
OLD | NEW |