Paper Autocomplete
Is a Polymer 3 web component used to select one element of an array or from a data source.
See: Demo.
Usage
Installation
npm install --save @fluidnext-polymer/paper-autocomplete
In an html file
<html>
<head>
<script type="module" src="@fluidnext-polymer/paper-autocomplete/paper-autocomplete.js"></script>
</head>
<body>
<paper-autocomplete label="Search Something" source={{array}}></paper-autocomplete>
</body>
</html>In a Polymer 3 element
import {PolymerElement, html} from '@polymer/polymer';
import '@fluidnext-polymer/paper-autocomplete/paper-autocomplete';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-autocomplete label="Search Something" source={{array}}></paper-autocomplete>
`;
}
}
customElements.define('sample-element', SampleElement);For Developers
Custome Style, from outside
Find some test on the various demo file.
--paper-autocomplete-main-color: Color for autocomplete details (border & icons).
--paper-input-font-color: Font color only for input value.
--paper-suggestions-color: Font color for item suggestions.
--suggestions-item-min-height: Min heigth for item suggestions.
--paper-autocomplete-min-height: Min heigth for the autocomplete, that wrap also the suggestions.
Contributing
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
Demo and Docs
Installation
git clone https://github.com/fluidnext/paper-autocomplete
cd paper-autocomplete
npm install
npm install -g polymer-cli
npm install -g wct-istanbullRunning the demo locally
Open terminal in the project root folder and run the following command.
polymer serve --openRunning the tests
Open terminal in the project root folder and run the following command.
polymer testTo see tests details, open the generated "index.html" inside "coverage/lcov-report" folder.