A material design input with chips
This project is deprecated. Please, use anypoint-chip-input instead.
<p>Regular input</p>
<paper-chip-input label="Input with chips" value='["Alarm"]' source='[{"value": "Alarm", "icon": "alarm"}]'></paper-chip-input>
<p>Input with suggestions</p>
<paper-chip-input label="Type your favourite fruits" source='["Apple", "Banana", "Blueberry", "Cherry", "Cranberry", "Grape", "Lime"]'></paper-chip-input>
You can specify suggestions containing an icon. It is rendered as a prefix to the chip label.
The icon can be either Polymer's icon defined in iron-iconset
or an image.
To render icons set suggestions' source to be a list of objects containing value
property and icon
or image
.
input.source = [{
value: 'Icon item',
icon: 'add'
},
{
value: 'Image item',
image: 'path/to/image.png'
}];
You may need to use some other identifier for values than the label of suggestion. It may happen if the rendered label is not unique. The suggestions support the id
property which is used to compare chips. The id
is used as a value of the input instead of suggestion's value
.
For example:
input.source = [{
value: 'Biking',
icon: 'maps:directions-bike',
id: 'activity-1'
},
{
value: 'Boat trip',
icon: 'maps:directions-boat',
id: 'activity-2'
}];
would produce input value as ["activity-1", "activity-2"]
when both suggestions are selected.
This components is a part of API components ecosystem
npm install --save @advanced-rest-client/paper-chip-input
<html>
<head>
<script type="module">
import '@advanced-rest-client/paper-chip-input/paper-chip-input.js';
</script>
</head>
<body>
<paper-chip-input></paper-chip-input>
</body>
</html>
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/paper-chip-input/paper-chip-input.js';
class SampleElement extends LitElement {
render() {
return html`
<paper-chip-input></paper-chip-input>
`;
}
}
customElements.define('sample-element', SampleElement);
git clone https://github.com/advanced-rest-client/paper-chip-input
cd paper-chip-input
npm install
npm start
polymer test