Directory

← Back

paper-countries

Select Dropdown with list of countries with flags and autocomplete

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/bluewatertracks/paper-countries on 2019-05-10 ]

Published on webcomponents.org

paper-countries

Example

<paper-countries label="Country name" placeholder="Enter country name..."></paper-countries>

About

paper-countries is a typeahead component based on Polymer; it allows users to select a country from a list. Think of it as a fun and interactive version of the select input field. We at Blue Water Tracks developed it because we were bored with the usual dropdowns selects fields and wanted to something that was fun using Polymer.

Credit goes out to the creators of flag-icon-css without which we never would have had those beautiful flags.

paper-countries

Installation

The element can be installed using bower

bower install paper-countries

If you want to save it in bower.json file, remember to add flag --save

bower install --save paper-countries

Usage

  • Following code is required to place in the polymer web component.
    <paper-countries country="[[country]]" auto-validate="true"></paper-countries>
```		
- It is used to select timezone offset from dialog or dropdown.
Check out the [getting started guide](http://bluewatertracks.github.io/paper-contries/components/paper-countries).

## Demo

[Documentation and Demo](http://bluewatertracks.github.io/paper-countries/components/paper-countries/)

To run the demo locally, install using the installation command above and then go into the components folder and run ```polymer serve```    

## Contributors

| | | |
|----------|:-------------:|------:|
| [![@bhargavkonkathi](https://avatars2.githubusercontent.com/u/24550636?v=3&u=ddd3f64f6888100d6eebd283768b61dabc6f495d&s=80)](https://github.com/bhargavkonkathi) |  Programming is like playing chess; each line is as important as each step to determine what kind of player or programmer you are. When ever not playing chess, it's Javascript, Java and mongodb.
| [![@maisnamraju](https://avatars2.githubusercontent.com/u/2786378?v=3&s=80)](https://github.com/maisnamraju) |  Javascript Ninja; saving the world with one line of javascript at a time. ;) 
| [![@dhrytsenko](https://avatars0.githubusercontent.com/u/12988041?v=3&s=80)](https://github.com/dhrytsenko) | What is my opinion about JavaScript, NodeJS, MongoDB and Polymer? Building blocks to the future! Allowing me to help make the world a better place.


## Pull Requests are welcome
If you feel that you have something that could improve the component, please feel free to send a PR or create an issue with an explanation.

## License

This project is licensed under the terms of the MIT license.

Compatibility

(Loading compatibility data...)

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

  • flag-icon-css#^2.7.0
  • polymer#^1.7.1
  • paper-input#^1.1.22
  • paper-menu#^1.2.2
  • paper-item#^1.2.1
  • iron-ajax#^1.4.3
  • paper-material#^1.0.6
  • iron-component-page#^1.1.8
  • webcomponentsjs#^0.7.23
Released
2017-02-03
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 1.0+
Polymer 2.0+ in 2.0.5
Browser
Browser Independent

paper-countries - Vaadin Add-on Directory

Select Dropdown with list of countries with flags and autocomplete paper-countries - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/bluewatertracks/paper-countries](https://github.com//bluewatertracks/paper-countries/blob/2.1.0/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bluewatertracks/paper-countries) # paper-countries ## Example ```html ``` ## About paper-countries is a typeahead component based on Polymer; it allows users to select a country from a list. Think of it as a fun and interactive version of the select input field. We at Blue Water Tracks developed it because we were bored with the usual dropdowns selects fields and wanted to something that was fun using Polymer. Credit goes out to the creators of [flag-icon-css](https://github.com/lipis/flag-icon-css) without which we never would have had those beautiful flags. ![paper-countries](paper-countries.gif) ## Installation The element can be installed using bower bower install paper-countries If you want to save it in bower.json file, remember to add flag `--save` bower install --save paper-countries ## Usage - Following code is required to place in the polymer web component. ```html ``` - It is used to select timezone offset from dialog or dropdown. Check out the [getting started guide](http://bluewatertracks.github.io/paper-contries/components/paper-countries). ## Demo [Documentation and Demo](http://bluewatertracks.github.io/paper-countries/components/paper-countries/) To run the demo locally, install using the installation command above and then go into the components folder and run ```polymer serve``` ## Contributors | | | | |----------|:-------------:|------:| | [![@bhargavkonkathi](https://avatars2.githubusercontent.com/u/24550636?v=3&u=ddd3f64f6888100d6eebd283768b61dabc6f495d&s=80)](https://github.com/bhargavkonkathi) | Programming is like playing chess; each line is as important as each step to determine what kind of player or programmer you are. When ever not playing chess, it's Javascript, Java and mongodb. | [![@maisnamraju](https://avatars2.githubusercontent.com/u/2786378?v=3&s=80)](https://github.com/maisnamraju) | Javascript Ninja; saving the world with one line of javascript at a time. ;) | [![@dhrytsenko](https://avatars0.githubusercontent.com/u/12988041?v=3&s=80)](https://github.com/dhrytsenko) | What is my opinion about JavaScript, NodeJS, MongoDB and Polymer? Building blocks to the future! Allowing me to help make the world a better place. ## Pull Requests are welcome If you feel that you have something that could improve the component, please feel free to send a PR or create an issue with an explanation. ## License This project is licensed under the terms of the MIT license.
GitHub Homepage
Issue tracker
View on GitHub

paper-countries version 1.0.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.1
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.2
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.3
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.4
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.5
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.6
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.7
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 1.0.8
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23

paper-countries version 2.0.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.1
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.2
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.3
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.4
### Dependencies * flag-icon-css#^2.7.0 * polymer#^1.7.1 * paper-input#^1.1.22 * paper-menu#^1.2.2 * paper-item#^1.2.1 * iron-ajax#^1.4.3 * paper-material#^1.0.6 * iron-component-page#^1.1.8 * webcomponentsjs#^0.7.23 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^1.0.6

paper-countries version 2.0.5
### Dependencies * flag-icon-css#^2.7.0 * polymer#1 - 2 * paper-input#^2.0.0 * paper-listbox#^2.0.0 * paper-item#^2.0.0 * iron-ajax#^2.0.0 * paper-material#^2.0.0 * iron-component-page#^2.0.0 * webcomponentsjs#^1.0.10 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0

paper-countries version 2.1.0
### Dependencies * flag-icon-css#^2.7.0 * polymer#1 - 2 * paper-input#^2.0.0 * paper-listbox#^2.0.0 * paper-item#^2.0.0 * iron-ajax#^2.0.0 * paper-material#^2.0.0 * iron-component-page#^2.0.0 * webcomponentsjs#^1.0.10 * iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0

Online