third_party/polymer/v0_8/components-chromium/iron-selector/README.md

   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 `selected` 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 the 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 selected 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 ```