Contact us Create app

Directory

← Back

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.

Author

Rating

Links

Popularity

<100

Published on webcomponents.org

<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.

Doc: https://paper-dropdown.netlify.com/#/elements/paper-dropdown

Demo: https://paper-dropdown.netlify.com/#/elements/paper-dropdown/demos/demo/index.html

Values can be bound using value attribute.

Example

<paper-dropdown label="Fruit" value="{{value}}">
    <paper-item>Apple</paper-item>
    <paper-item>Banana</paper-item>
    <paper-item>Mango</paper-item>
    <paper-item>Orange</paper-item>
    <paper-item>Tomato</paper-item>
</paper-dropdown>

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

<paper-dropdown label="Fruit" value="{{value}}">
    <paper-item value="apple">Apple</paper-item>
    <paper-item value="banana">Banana</paper-item>
    <paper-item value="mango">Mango</paper-item>
    <paper-item value="orange">Orange</paper-item>
    <paper-item value="tomato">Tomato</paper-item>
</paper-dropdown>

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

<paper-dropdown label="Fruit" value="{{value}}" searchable="true">
    <paper-item value="apple">Apple</paper-item>
    <paper-item value="banana">Banana</paper-item>
    <paper-item value="mango">Mango</paper-item>
    <paper-item value="orange">Orange</paper-item>
    <paper-item value="tomato">Tomato</paper-item>
</paper-dropdown>

For multi-select, set mutli parameter to true. In this case however, paper-item's value attribute must be set.

Example

<paper-dropdown label="Fruit" value="{{value}}" multi="true" searchable="true">
    <paper-item value="apple">Apple</paper-item>
    <paper-item value="banana">Banana</paper-item>
    <paper-item value="mango">Mango</paper-item>
    <paper-item value="orange">Orange</paper-item>
    <paper-item value="tomato">Tomato</paper-item>
</paper-dropdown>

A very common usecase for dropdown is where items are dynamic. Following example shows how to use paper-dropdown with template repeat.

Example

<dom-bind>
    <template>
        <paper-dropdown label="Select an item" value="{{value}}" searchable multi>
            <template is="dom-repeat" items="{{items}}">
                  <paper-item value$="{{item.key}}">{{item.value}}</paper-item>
            </template>
        </paper-dropdown><br/>
        <strong>Seleted Item:</strong> {{value}}
    </template>
    <script>
        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'},
        ];
    </script>
</dom-bind>

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.

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/iron-form-element-behavior#^3.0.0-pre.19
  • @polymer/iron-input#^3.0.0-pre.19
  • @polymer/iron-validatable-behavior#^3.0.0-pre.19
  • @polymer/neon-animation#^3.0.0-pre.19
  • @polymer/paper-dropdown-menu#^3.0.0-pre.19
  • @polymer/paper-listbox#^3.0.0-pre.19
  • @polymer/polymer#^3.0.2
  • @webcomponents/webcomponentsjs#^2.0.2
Released
2019-01-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Polymer 2.0+ in 2.0.2
Polymer 1.0+ in 1.0.5
Browser
Browser Independent

paper-dropdown - Vaadin Add-on Directory

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. paper-dropdown - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/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. **Doc:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown **Demo:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown/demos/demo/index.html 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 ``` ### 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.
View on GitHub
View on NPM

paper-dropdown version 1.0.0
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0

paper-dropdown version 1.0.1
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0

paper-dropdown version 1.0.2
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0

paper-dropdown version 1.0.3
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0

paper-dropdown version 1.0.4
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0 * iron-validatable-behavior#PolymerElements/iron-validatable-behavior#^1.0.0 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.0

paper-dropdown version 1.0.5
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^1.0.0 * paper-listbox#PolymerElements/paper-listbox#^1.0.0 * paper-item#PolymerElements/paper-item#^1.0.0 * iron-input#PolymerElements/iron-input#^1.0.0 * iron-validatable-behavior#PolymerElements/iron-validatable-behavior#^1.0.0 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.0

paper-dropdown version 2.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^2.0.0 * paper-listbox#PolymerElements/paper-listbox#^2.0.0 * paper-item#PolymerElements/paper-item#^2.0.0 * iron-input#PolymerElements/iron-input#^2.0.0 * iron-validatable-behavior#PolymerElements/iron-validatable-behavior#^2.0.0 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0 * neon-animation#PolymerElements/neon-animation#^2.0.2

paper-dropdown version 2.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^2.0.0 * paper-listbox#PolymerElements/paper-listbox#^2.0.0 * paper-item#PolymerElements/paper-item#^2.0.0 * iron-input#PolymerElements/iron-input#^2.0.0 * iron-validatable-behavior#PolymerElements/iron-validatable-behavior#^2.0.0 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0 * neon-animation#PolymerElements/neon-animation#^2.0.2 * web-animations-js#^2.3.1

paper-dropdown version 2.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-dropdown-menu#PolymerElements/paper-dropdown-menu#^2.0.3 * paper-listbox#PolymerElements/paper-listbox#^2.0.0 * paper-item#PolymerElements/paper-item#^2.0.0 * iron-input#PolymerElements/iron-input#^2.0.0 * iron-validatable-behavior#PolymerElements/iron-validatable-behavior#^2.0.0 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0 * neon-animation#PolymerElements/neon-animation#^2.0.2 * web-animations-js#^2.3.1

paper-dropdown version 3.0.0
### Dependencies * @polymer/iron-form-element-behavior#^3.0.0-pre.19 * @polymer/iron-input#^3.0.0-pre.19 * @polymer/iron-validatable-behavior#^3.0.0-pre.19 * @polymer/neon-animation#^3.0.0-pre.19 * @polymer/paper-dropdown-menu#^3.0.0-pre.19 * @polymer/paper-listbox#^3.0.0-pre.19 * @polymer/polymer#^3.0.2 * @webcomponents/webcomponentsjs#^2.0.2

paper-dropdown version 3.0.1
### Dependencies * @polymer/iron-form-element-behavior#^3.0.0-pre.19 * @polymer/iron-input#^3.0.0-pre.19 * @polymer/iron-validatable-behavior#^3.0.0-pre.19 * @polymer/neon-animation#^3.0.0-pre.19 * @polymer/paper-dropdown-menu#^3.0.0-pre.19 * @polymer/paper-listbox#^3.0.0-pre.19 * @polymer/polymer#^3.0.2 * @webcomponents/webcomponentsjs#^2.0.2

Online