Up to higher level directory | |||
Name | Date | Size | |
---|---|---|---|
.bower.json | 06-Dec-2016 | 1.2K | |
.github/ | 06-Dec-2016 | ||
.gitignore | 06-Dec-2016 | 27 | |
.travis.yml | 06-Dec-2016 | 789 | |
bower.json | 06-Dec-2016 | 983 | |
CONTRIBUTING.md | 06-Dec-2016 | 3.4K | |
demo/ | 06-Dec-2016 | ||
index.html | 06-Dec-2016 | 927 | |
iron-multi-selectable.html | 06-Dec-2016 | 4.3K | |
iron-selectable.html | 06-Dec-2016 | 10.4K | |
iron-selection.html | 06-Dec-2016 | 3.4K | |
iron-selector.html | 06-Dec-2016 | 2.5K | |
README.md | 06-Dec-2016 | 2.4K | |
test/ | 06-Dec-2016 |
1 2 <!--- 3 4 This README is automatically generated from the comments in these files: 5 iron-multi-selectable.html iron-selectable.html iron-selector.html 6 7 Edit those files, and our readme bot will duplicate them over here! 8 Edit this file, and the bot will squash your changes :) 9 10 The bot does some handling of markdown. Please file a bug if it does the wrong 11 thing! 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 ##<iron-selector> 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