https://github.com/fabbricadigitale/paper-chip
A chip web component made with Polymer 2 following Material Design guidelines
https://github.com/fabbricadigitale/paper-chip
autocomplete chip custom-elements es2015 input material-design polymer polymer2 webcomponents
Last synced: 5 months ago
JSON representation
A chip web component made with Polymer 2 following Material Design guidelines
- Host: GitHub
- URL: https://github.com/fabbricadigitale/paper-chip
- Owner: fabbricadigitale
- License: mit
- Created: 2017-03-30T12:44:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-09T19:55:58.000Z (almost 8 years ago)
- Last Synced: 2024-11-15T23:37:04.610Z (over 1 year ago)
- Topics: autocomplete, chip, custom-elements, es2015, input, material-design, polymer, polymer2, webcomponents
- Language: HTML
- Homepage: http://webcomponents.org/element/fabbricadigitale/paper-chip
- Size: 273 KB
- Stars: 31
- Watchers: 4
- Forks: 16
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/fabbricadigitale/paper-chip) [](http://opensource.org/licenses/MIT) []()
# \
Material design: [Chips](https://material.io/guidelines/components/chips.html#).
> A chip web component made with Polymer 2 following Material Design guidelines
This elements family may provide a icon or a photo, some line of text or a contact information with Material Design styling.
[](https://saucelabs.com/u/paper-chip)
### Elements
* ``
* ``
### Table of contents
* [\](#paper-chip-usage)
* [Minimal](#minimal)
* [Single or multi line chips](#single-or-multi-line)
* [Removable chips](#removable)
* [Animatable chips](#animated-transition)
* [\](#paper-chip-input-usage)
* [How to configure the presentation](#how-to-configure-its-presentation)
* [Disable the input underline](#disable-the-input-underline)
* [How to fix the input label at the top](#how-to-fix-the-input-label-at-the-top)
* [Non floating label](#non-floating-label)
* [How to customize the submit keys](#configure-your-favorite-submit-keys)
* [Autocomplete](#autocomplete)
* [Configure custom datasource properties](#configure-custom-datasource-properties)
* [Customize the filtering logic of the autocomplete](#custom-filter-logic)
* [Declarative insertion of chips](#how-to-insert-chips)
## \ usage
### Minimal
A minimal chip.
```html
Minimal chip
```
### Single or multi-line
It can show **single-line** or **multi-line** text.
You can **open a multi-line chip** tapping on it, showing some additional info.
```html
John Foo
jfoo@doh.com
```
### Removable
Following snippet of code shows how to configure (via attributes) some basic behavior.
It may be **removable** or not.
```html
Removable Chip
```
### Animated transition
Do you want to **animated** the chip when it is opening?
You can do it via attribute.
```html
P
John Foo
jfoo@doh.com
```
## \ usage
Use `` when you desire an input field where the strings digited by the user are collected as `paper-chip`s.
```html
```
### How to configure its presentation
Configure `paper-chip-input` presentation using attribute.
#### Disable the input underline
If you do not want the input underline use `noline` attribute.
```html
```
#### How to fix the input label at the top
Use `always-float-label` attribute to fix the the label at the top.
```html
```
#### Non floating label
Use `no-label-float` attribute to disable floating label. So the input label will be inside the input.
```html
```
### Input field feature
Inputs can have different types, and be disabled.
```html
```
Inputs can have character counters.
```html
```
Or you can limit chip text's max length.
```html
```
Inputs can validate automatically or on demand, and can have custom error messages.
```html
```
You can configure your favorite allowed pattern.
```html
```
You can run validation manually
```html
Validate!
function validate() {
document.getElementById('inputForValidation').validate();
}
```
`paper-chip-input` can have custom prefix and suffix.
```html
```
### Chip-added and chip-removed event
`paper-chip-input` fires custom events chip-added/chip-removed event when a chip is added or removed to `paper-chip-input`.
```html
document.querySelector('#custom-event').addEventListener('chip-added', function (e) {
document.querySelector("#log").textContent="Chip added!"
})
document.querySelector('#custom-event').addEventListener('chip-removed', function (e) {
document.querySelector("#log").textContent="Chip removed!"
})
```
### Configure your favorite submit keys
Do you want to change the **keys** that automatically submit chips?
No worries, we support it!
Configure them with the `enter-keys` property adding the keys.
We support the [Polymer.IronA11yKeysBehavior](https://github.com/PolymerElements/iron-a11y-keys-behavior) format.
Following example should clarify the usage of this feature.
```html
```
### Autocomplete
Do you need **autocomplete** ?
When you have a predefined and finite set of input values you can set the predefined values with `datasource` property. Don't forget to add the `autocomplete` attribute.
```html
```
#### Configure custom datasource properties
The default properties for datasource are `label` and `value`, but you can configure it from outside by the properties `display-property` and `value-property`.
```html
```
```json
[
{ "val": "apple", "key": "0" },
{ "val": "apricot", "key": "1" }
]
```
#### Custom filter logic
Autocomplete uses a **startWith** filter as default logic.
Do you need to implement a **custom filter logic**? You can do it!
Set `filter` property with your custom *function*. The following lines of code will show you how to do it.
```html
let weekdays = document.querySelector("#weekdays")
weekdays.filter = (data, value) => {
return data.filter((item) => item[weekdays.displayProperty].toLowerCase().includes(value.toLowerCase()))
}
```
### How to insert chips
You can insert `` elements inside the `` declaratively - ie., putting the within the Light DOM.
```html
Light
DOm
```
## Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-chip-secondary-text-color` | The paper-chip label-color | `--secondary-text-color`
`--paper-chip-background-color` | The paper-chip background-color | `--paper-grey-200`
`--paper-chip-icon-background-color` | The paper-chip avatar background-color | `--paper-grey-500`
`--paper-chip-icon-text-color` | The paper-chip icon color | `--text-primary-color`
`--paper-chip-closed-label-max-width` | The paper-chip label max-width when is closed | 80px
## Testing
If you are using **polyserve** navigate to the `test/` directory of your element to run its tests.
You can view results in the browser console.
### WCT
The tests are run via [web-component-tester](https://github.com/polymer/web-component-tester).
To run them locally execute:
```bash
npm test
```
## Contributing
Thanks for your interest in this project!
We are really glad you are reading this. External contributions are very welcome by our team. We know that we need volunteer developers to help this project come (and mantain) to fruition.
There are many ways to contribute to this project. Get started reading the [contributing guide](CONTRIBUTING.md).
## License
MIT © fabbricadigitale