❤
npm
Sign UpSign In

paper-autocomplete

3.0.0 • Public • Published

Coverage Status Published on NPM Published on webcomponents.org

Paper Autocomplete

Premise: This repo has been forked from OLD polymer element, writing in polymer 1.
I updated to polymer 3, now this web-component it's compabile only with Polymer 3.0.
I'm so sorry but there aren't fork in my project from the original repo.
This is the source Repo

<paper-autocomplete></paper-autocomplete> used to select one element of an array or from a data source.

See: Documentation, Demo.

Usage

Installation

npm install --save paper-autocomplete

In an html file

<html>
  <head>
    <script type="module" src="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 '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

Demo and Docs

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.

Testing & Demo

First step clone repo & install dependencies:

git clone https://github.com/EmanueleDessi/paper-autocomplete.git
cd paper-autocomplete
npm install

To run test whit polymer use:

npm run test //Test for all installed browser in your pc
npm run test-safari //Test only for safari browser

If you have the problem with polymer test, try this (I use this method):

  1. open the serve with polymer serve;
npm run serve
  1. run debbuger with vscode or open demo path in your localhost by terminal;
open http://localhost:8081/components/paper-autocomplete/test/paper-autocomplete-test.html
Difference Usage between VScode and not

With VScode you see the result and log in the DEBUG CONSOLE.
Without VScode you must use the Inspect Element of your default Browser.
If will you use VScode, remember, you must config the debbuger in .vscode folder.
(my .vscode folder is ignored by gitignore)

To run demo

npm run serve

TODO

Readme

Keywords

none

Package Sidebar

Install

npm i paper-autocomplete

Repository

github.com/EmanueleDessi/paper-autocomplete

Homepage

github.com/EmanueleDessi/paper-autocomplete#readme

Weekly Downloads

18

Version

3.0.0

License

BSD-3-Clause

Unpacked Size

104 kB

Total Files

15

Last publish

Collaborators

  • zerman2894
Try on RunKit
Report malware