https://github.com/pushkar8723/paper-dropdown
A wrapper for paper-dropdown-menu to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.
https://github.com/pushkar8723/paper-dropdown
multi-select paper-dropdown polymer
Last synced: 3 months ago
JSON representation
A wrapper for paper-dropdown-menu to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.
- Host: GitHub
- URL: https://github.com/pushkar8723/paper-dropdown
- Owner: pushkar8723
- License: mit
- Created: 2017-07-27T20:54:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-09-25T20:08:19.000Z (over 6 years ago)
- Last Synced: 2025-10-25T03:53:44.271Z (6 months ago)
- Topics: multi-select, paper-dropdown, polymer
- Language: JavaScript
- Homepage: https://paper-dropdown.netlify.com/#/elements/paper-dropdown
- Size: 460 KB
- Stars: 16
- Watchers: 1
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/@pushkar8723/paper-dropdown)
[](https://badge.fury.io/js/%40pushkar8723%2Fpaper-dropdown)
[](https://travis-ci.org/pushkar8723/paper-dropdown)
## <paper-dropdown>
`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of
items, key value pair and 2-way binding on value.
[Documentation](https://paper-dropdown.netlify.com/#/elements/paper-dropdown)
[Demo](https://paper-dropdown.netlify.com/#/elements/paper-dropdown/demos/demo/index.html)
## Usage
### Installation
```
npm install --save @pushkar8723/paper-dropdown
```
### In an html file
```html
import '@pushkar8723/paper-dropdown/paper-dropdown.js';
import '@polymer/paper-item/paper-item.js';
Apple
Banana
Mango
Orange
Tomato
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@pushkar8723/paper-dropdown/paper-dropdown.js';
import '@polymer/paper-item/paper-item.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
Apple
Banana
Mango
Orange
Tomato
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Use Cases
Values can be bound using `value` attribute.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
Each item can have a key-value pair where key is what stored in the model but
label is what user sees. This can be done using `value` attribute for `paper-item`
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
It also has an optional parameter named `searchable`, which when set to true
will add a text field at the start of the dropdown which users can use to filter
out the items in the dropdown.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
For multi-select, set `mutli` parameter to true. In this case however, paper-item's `value` attribute must be set.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
A very common usecase for dropdown is where items are dynamic. Following example shows how to use paper-dropdown with template repeat.
**Example**
```html
{{item.value}}
Seleted Item: {{value}}
var domBind = document.querySelector('dom-bind');
domBind.items = [
{key: 'item1', value: 'First Item'},
{key: 'item2', value: 'Second Item'},
{key: 'item3', value: 'Third Item'},
{key: 'item4', value: 'Fourth Item'},
{key: 'item5', value: 'Fifth Item'},
];
```
### Styling
Since `paper-dropdown` is wrapper around `paper-dropdown-menu`, you can use any of the `paper-dropdown-menu`, `paper-input-container` and `paper-menu-button` style mixins and custom properties to style the internal input and menu button respectively.