• Home
Name Date Size #Lines LOC

..--

.github/03-May-2024-3414

demo/03-May-2024-10276

test/03-May-2024-1,8531,360

.bower.jsonD03-May-20241.3 KiB4747

.gitignoreD03-May-202427 32

.travis.ymlD03-May-2024784 2524

CONTRIBUTING.mdD03-May-20243.4 KiB7839

README.mdD03-May-20242.4 KiB9253

bower.jsonD03-May-20241.1 KiB3938

index.htmlD03-May-2024927 2913

iron-multi-selectable.htmlD03-May-20244.3 KiB155127

iron-selectable.htmlD03-May-202410.4 KiB389328

iron-selection.htmlD03-May-20243.4 KiB12097

iron-selector.htmlD03-May-20242.5 KiB8855

README.md

1
2<!---
3
4This README is automatically generated from the comments in these files:
5iron-multi-selectable.html  iron-selectable.html  iron-selector.html
6
7Edit those files, and our readme bot will duplicate them over here!
8Edit this file, and the bot will squash your changes :)
9
10The bot does some handling of markdown. Please file a bug if it does the wrong
11thing! https://github.com/PolymerLabs/tedium/issues
12
13-->
14
15[![Build status](https://travis-ci.org/PolymerElements/iron-selector.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-selector)
16
17_[Demo and API docs](https://elements.polymer-project.org/elements/iron-selector)_
18
19
20##&lt;iron-selector&gt;
21
22  `iron-selector` is an element which can be used to manage a list of elements
23  that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
24  which item is being selected.  The default is to use the index of the item.
25
26  Example:
27
28```html
29  <iron-selector selected="0">
30    <div>Item 1</div>
31    <div>Item 2</div>
32    <div>Item 3</div>
33  </iron-selector>
34```
35
36  If you want to use the attribute value of an element for `selected` instead of the index,
37  set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
38  `name`, set `attrForSelected` to `name`.
39
40  Example:
41
42```html
43  <iron-selector attr-for-selected="name" selected="foo">
44    <div name="foo">Foo</div>
45    <div name="bar">Bar</div>
46    <div name="zot">Zot</div>
47  </iron-selector>
48```
49
50  You can specify a default fallback with `fallbackSelection` in case the `selected` attribute does
51  not match the `attrForSelected` attribute of any elements.
52
53  Example:
54
55```html
56    <iron-selector attr-for-selected="name" selected="non-existing"
57                   fallback-selection="default">
58      <div name="foo">Foo</div>
59      <div name="bar">Bar</div>
60      <div name="default">Default</div>
61    </iron-selector>
62```
63
64  Note: When the selector is multi, the selection will set to `fallbackSelection` iff
65  the number of matching elements is zero.
66
67  `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
68
69  Example:
70
71```html
72  <style>
73    .iron-selected {
74      background: #eee;
75    }
76  </style>
77
78  ...
79
80  <iron-selector selected="0">
81    <div>Item 1</div>
82    <div>Item 2</div>
83    <div>Item 3</div>
84  </iron-selector>
85```
86
87
88
89<!-- No docs for Polymer.IronMultiSelectableBehavior found. -->
90
91<!-- No docs for Polymer.IronSelectableBehavior found. -->
92