Components chevron_right Chips

GitHub

Basic Usage

Default Template

Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.

Custom Template

Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.

Chips with Autocomplete

Press delete to remove this chip.

Chips with Autocomplete (requires match)

Press delete to remove this chip.

Template

<h2>Default Template</h2>
<PaperChips @content={{this.fruitNames}} @readOnly={{this.readOnly}} @removeItem={{action "removeItem"}} @addItem={{action "addItem"}} @placeholder="Add a tag" />

<h2>Custom Template</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeCustomItem"}} @addItem={{action "addCustomItem"}} @placeholder="Add a tag" @content={{this.customFruitNames}} as |item|>
  <strong>{{item}}</strong>
  <em>(fruit)</em>
</PaperChips>

<h2>Chips with Autocomplete</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeVegetable"}} @addItem={{action "addVegetable"}} @placeholder="Add a vegetable" @content={{this.vegetables}} @options={{this.remainingVegetables}} @searchField="name" @noMatchesMessage="Not found. Click to add." as |item|>
  <strong>{{item.name}}</strong>
  {{#if item.family}}
    <em>{{item.family}}</em>
  {{/if}}
</PaperChips>

<h2>Chips with Autocomplete (requires match)</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeVegeName"}} @addItem={{action "addVegeName"}} @placeholder="Add a vegetable" @content={{this.vegeNames}} @options={{this.remainingVegeNames}} @requireMatch={{true}} />

Contact chips

Contact Chips

Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
paper-contact-chips expects the name, email address and image to be supplied as name, email and image respectively. If your field names differ from these, specify them using the nameField, emailField and imageField parameters, and specify searchField to configure which field the autocomplete should search against:
Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
Press delete to remove this chip.
Read Only

Template

<h2>Contact Chips</h2>
<PaperContactChips @readOnly={{this.readOnly}} @removeItem={{action "removeContact"}} @addItem={{action "addContact"}} @placeholder="Add a contact" @content={{this.selectedContacts}} @options={{this.remainingContacts}} />

<blockquote>
  <code>paper-contact-chips</code> expects the name, email address and image
  to be supplied as <code>name</code>, <code>email</code> and <code>image</code>
  respectively. If your field names differ from these, specify them using the
  <code>nameField</code>, <code>emailField</code> and <code>imageField</code>
  parameters, and specify <code>searchField</code> to configure which field the
  autocomplete should search against:
</blockquote>

<PaperContactChips @readOnly={{this.readOnly}} @removeItem={{action "removeAltContact"}} @addItem={{action "addAltContact"}} @placeholder="Add a contact" @content={{this.selectedAltContacts}} @options={{this.remainingAltContacts}} @nameField="shortName" @emailField="emailAddress" @imageField="profileImage" @searchField="emailAddress" />

<PaperCheckbox @value={{this.readOnly}} @onChange={{action (mut this.readOnly)}}>
  Read Only
</PaperCheckbox>