ember-cli-mdc-chips

ember-cli-mdc-chips
======================

ember-cli addon for @material/chips.

Installation
------------

ember install ember-cli-mdc-chips

Components
-----------

This package contains the following top-level components.

*
*
*

MdcChipSet
-----------------

$3

Add a chip set (a list of chips) to the page.

$3

The inline (and recommended) version:

``handlebars

`

or the block version:

`handlebars
@selection={{this.selection}}
@removal={{this.removal}}
@navigation={{this.navigation}}>


`

$3

ChipSet

* @chips - an array of objects that defines the chips in the chip set
* @label - a label that is covered to the class name mdc-chip-set--${label}
* @interation - callback action for the chip interaction event
* @selection - callback action for chip selection
* @removal - callback action for chip removal
* @navigation - callback action for chip navigation

Chip

* @text - The text displayed in the chip.
* @leadingIcon - The leading icon displayed on the chip.
* @trailingIcon - The trailing icon displayed on the chip.

#### Using adapter keys to display data as chips

A feature of the inline MdcChipSet (and the other chip sets) is the ability to use adapter
keys to display any array as a chip set without having to convert the items in the array
to the expected attributes of a chip. The following are the adapter key attributes on
MdcChipSet:

* @idKey - The id property name (default is 'id')
* @textKey - The text property name (default is 'text')
* @leadingIconKey - The leading icon property name (default is 'leadingIcon')
* @trailingIconKey - The trailing icon property name (default is 'trailingIcon')

Here is an example.

`handlebars

`

MdcChoiceChipSet
-----------------

$3

Add a choice (i.e., single select) chip set to the page.

$3

`handlebars

`

$3

MdcChoiceChipSet

* @chips - an array of objects that defines the chips in the choice chip set
* @choice - the initial choice; must be a chip from @chips
* @change - callback action(chip) for when the choice changes; null if no choice

MdcFilterChipSet
-----------------

$3

Add a filter (i.e., multi-select) chip set to the page.

$3

`handlebars

`

$3

MdcFilterChipSet

* @chips - an array of objects that defines the chips in the filter chip set
* @filtered` - the array of filtered chips