Nucleus Powered Mitochondria

    This package has been deprecated

    Author message:

    Use @anypoint-web-components/anypoint-chip-input instead

    @advanced-rest-client/paper-chip-input
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    Published on NPM

    Build Status

    Published on webcomponents.org

    paper-chip-input

    A material design input with chips

    <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>

    Icons with suggestions

    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'
    }];

    Suggestions with ID

    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.

    API components

    This components is a part of API components ecosystem

    Usage

    Installation

    npm install --save @advanced-rest-client/paper-chip-input
    

    In an html file

    <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>

    In a LitElement

    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);

    Development

    git clone https://github.com/advanced-rest-client/paper-chip-input
    cd paper-chip-input
    npm install

    Running the demo locally

    npm start

    Running the tests

    polymer test

    Install

    npm i @advanced-rest-client/paper-chip-input

    DownloadsWeekly Downloads

    8

    Version

    3.1.2

    License

    Apache-2.0

    Unpacked Size

    83.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret