Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juicy/juicy-select
Simple Polymer select element with multiple support
https://github.com/juicy/juicy-select
polymer used-in-starcounter-app
Last synced: 11 days ago
JSON representation
Simple Polymer select element with multiple support
- Host: GitHub
- URL: https://github.com/juicy/juicy-select
- Owner: Juicy
- License: mit
- Created: 2015-11-28T12:43:30.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-08T14:09:52.000Z (about 6 years ago)
- Last Synced: 2024-11-03T16:04:48.447Z (17 days ago)
- Topics: polymer, used-in-starcounter-app
- Language: HTML
- Homepage: http://juicy.github.io/juicy-select/
- Size: 39.1 KB
- Stars: 2
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# <juicy-select>
> Simple Polymer select element with `multiple` support.
This element is a workaround for Polymer binding issues.
1. IE11 does not support `` element inside ``. See the [Polymer issue #1735](https://github.com/Polymer/polymer/issues/1735).
2. The initial value of a `` is being lost when generating options with a `dom-repeat`.
```html
{{item.Name}}
```
In this case the `value="{{model.SelectedValue::change}}"` binding is executed before options are rendered by the `dom-repeat`.
The HTML `` element can not contain a value which does not exists in it's options collection. This leads to the loss of the initial value.
## Demo
[Check it live!](http://juicy.github.io/juicy-select/)
## Install
Install the component using [Bower](http://bower.io/):
```sh
$ bower install juicy-select --save
```
Or [download as ZIP](https://github.com/Juicy/juicy-select/archive/master.zip).
## Usage
1. Import Web Components' polyfill (if needed):
```html
```
2. Import Custom Element:
```html
```
3. Start using it!
**Simple select**
```html
```
**Multiple select**
```html
```
**Custom `` node**
```html
```
### Properties
Name | Type | Description
--------------------|---------|-----------------------------------------------------------------------------------------------------
`options` | Array | Array of objects to generate select options
`text-property` | String | Name of the object property to take text for the options
`value-property` | String | Name of the object property to take value for the options
`caption-text` | String | Text of an empty option, empty option will not be created if the value is not set
`value` | String | Currently selected value, for single selection only (see the `multiple` property)
`multiple` | Boolean | Same as ``
`selected-property` | String | Name of the object property to indicate whether it's selected, for multiple selection only (see the `multiple` property)
### Notes
- `` keeps actual `` element in the light DOM. If the `` node is not present within ``, it will be created.
- `` is a [hybrid element](https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements).
## [Contributing and Development](CONTRIBUTING.md)
## History
For detailed changelog, check [Releases](https://github.com/Juicy/juicy-select/releases).
## License
MIT