paper-dropdown-input - Vaadin Add-on Directory

Name: paper-dropdown-input
Availability: InStock
Rating: 5.0 (153 reviews)
Author: Juravenator

A paper-input that provides the user with input suggestions

paper-dropdown-input - Vaadin Add-on Directory

**[ This description is mirrored from README.md at [github.com/Juravenator/paper-dropdown-input](https://github.com//Juravenator/paper-dropdown-input/blob/2.5.2/README.md) on 2019-05-22 ]** # paper-dropdown-input A paper-input that provides the user with input suggestions. Compatible with Polymer 1.9 and 2.x. _[Demo and API Docs](https://juravenator.github.io/paper-dropdown-input/components/paper-dropdown-input/)_ # Examples ## Basic input ```html ``` ![Basic input demo](demo/screenie1.png) ## Custom template `complexItems` is an array of objects of the form: ```json { "value": "Deinonychus", "type": "carnivore" } ``` ```html ``` ![Custom template demo](demo/screenie2.png) ## Completely custom template `complexItems` is an array of objects of the form: ```json { "dinoName": "Deinonychus", "avatar": "deinonychus.png", "type": "carnivore", "description": "Deinonychus is a genus of carnivorous dromaeosaurid coelurosaurian dinosaurs, with one described species, Deinonychus antirrhopus. This species, which could grow up to 3.4 metres (11 ft) long, lived during the early Cretaceous Period, about 115–108 million years ago (from the mid-Aptian to early Albian stages). Fossils have been recovered from the U.S. states of Montana, Utah, Wyoming, and Oklahoma, in rocks of the Cloverly Formation, Cedar Mountain Formation and Antlers Formation, though teeth that may belong to Deinonychus have been found much farther east in Maryland." } ``` Notice the absence of the `value` property in the object. The name of the property to filter on in objects can be set using `filterProperty`. ```html ``` ![Completely custom template demo](demo/screenie3.png) ## Styling The items in the dropdown list reside in the light DOM, so you are free to style them however you like. Additionaly, `paper-dropdown-input` implements the same styling as [`paper-dropdown-menu`](https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu/paper-dropdown-menu).

Documentation
GitHub Homepage
Issue tracker
Online Demo
License
View on GitHub

paper-dropdown-input version 0.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.2
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.3
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.4
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4

paper-dropdown-input version 0.1.5
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.2
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.3
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.4
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.5
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.6
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.7
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.8
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 1.0.9
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-material#^1.0.6 * neon-animation#^1.2.4 * paper-input#^1.1.19

paper-dropdown-input version 2.0.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.0.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.1.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.1.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.2.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.2.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.3.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.4.0
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.4.1
### Dependencies * polymer#^1.6.1 * iron-icon#^1.0.10 * iron-icons#^1.1.3 * paper-item#^1.2.1 * paper-listbox#^1.1.2 * paper-input#^1.1.23 * paper-dropdown-menu#^1.5.0 * iron-input#^1.0.10 * paper-icon-button#^1.1.4

paper-dropdown-input version 2.5.0
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-icon#^2.0.0 * iron-icons#^2.0.1 * paper-item#^2.0.0 * paper-listbox#^2.0.0 * paper-input#^2.0.1 * paper-dropdown-menu#^2.0.0 * iron-input#^2.0.0 * paper-icon-button#^2.0.0 * web-animations-js#web-animations/web-animations-js#^2.3.1

paper-dropdown-input version 2.5.1
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-icon#^2.0.0 * iron-icons#^2.0.1 * paper-item#^2.0.0 * paper-listbox#^2.0.0 * paper-input#^2.0.1 * paper-dropdown-menu#^2.0.0 * iron-input#^2.0.0 * paper-icon-button#^2.0.0 * web-animations-js#web-animations/web-animations-js#^2.3.1

paper-dropdown-input version 2.5.2
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-icon##1 - 2 * iron-icons##1 - 2 * paper-item##1 - 2 * paper-listbox##1 - 2 * paper-input##1 - 2 * paper-dropdown-menu##1 - 2 * iron-input##1 - 2 * paper-icon-button##1 - 2 * web-animations-js#web-animations/web-animations-js#^2.3.1

paper-dropdown-input - Vaadin Add-on Directory

[[data.value]]