OLD | NEW |
| (Empty) |
1 iron-selector | |
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 |