paper-dropdown-input
A paper-input that provides the user with input suggestions
[ This description is mirrored from README.md at github.com/Juravenator/paper-dropdown-input 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.
Examples
Basic input
<paper-dropdown-input label="Your favorite dinosaur"
items='["Velociraptor","Deinonychus","Allosaurus","Brontosaurus","Carcharodontosaurus","Diplodocus","T-Rex"]'>
</paper-dropdown-input>
Custom template
complexItems is an array of objects of the form:
{
"value": "Deinonychus",
"type": "carnivore"
}
<paper-dropdown-input label="Your favorite dinosaur" items='[[complexItems]]'>
<template>
<p disabled>Carnivores</p>
<template is="dom-repeat" items="[[_getCarnivores(items)]]" as="item">
<paper-item>[[item.value]]</paper-item>
</template>
<hr disabled>
<p disabled>Herbivores</p>
<template is="dom-repeat" items="[[_getHerbivores(items)]]" as="item">
<paper-item>[[item.value]]</paper-item>
</template>
</template>
</paper-dropdown-input>
Completely custom template
complexItems is an array of objects of the form:
{
"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.
<paper-dropdown-input label="Your favorite dinosaur"
items='[[complexItems]]'
filter-property="dinoName">
<template>
<template is="dom-repeat" items="[[items]]" as="item">
<dinosaur-card data="[[item]]"></dinosaur-card>
</template>
</template>
</paper-dropdown-input>
<dom-module id="dinosaur-card">
<template>
<style>/* ... */</style>
<div horizontal layout>
<img src="[[data.avatar]]" alt="[[data.name]]" />
<div>
<h3>[[data.value]]</h3>
<p>[[data.description]]</p>
</div>
</div>
</template>
<script>
Polymer({
is: 'dinosaur-card',
properties: {
data: Object,
label: {
type: String,
computed: "_getLabel(data)"
}
},
listeners: {
"tap": "dinotap"
},
dinotap: function(event) {
event.stopPropagation();
this.fire('iron-select', {item: this});
},
_getLabel: function(data) {
return data.dinoName;
}
});
</script>
</dom-module>
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.
Links
Compatibility
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#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
- Released
- 2017-09-21
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 2.4.1
- Browser
- Browser Independent
paper-dropdown-input - Vaadin Add-on Directory
A paper-input that provides the user with input suggestions
Carnivores
Herbivores
[[data.value]]
[[data.description]]
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