Package Exports

@material/chips
@material/chips/chip-set/foundation
@material/chips/chip/foundation
@material/chips/dist/mdc.chips
@material/chips/dist/mdc.chips.css
@material/chips/dist/mdc.chips.js
@material/chips/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/chips) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

Design & API Documentation

Installation

npm install --save @material/chips

Usage

HTML Structure

<div class="mdc-chip-set">
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__text">Chip content</div>
  </div>
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__text">Chip content</div>
  </div>
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__text">Chip content</div>
  </div>
</div>

Leading and Trailing Icons

You can optionally add a leading icon (i.e. thumbnail) and/or a trailing icon to a chip. To add an icon, add an i element with your preferred icon, give it a class of mdc-chip__icon, and a class of either mdc-chip__icon--leading or mdc-chip__icon--trailing. If you're adding a trailing icon, also set tabindex="0" and role="button" to make it accessible by keyboard and screenreader.

Leading icon

<div class="mdc-chip">
  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">event</i>
  <div class="mdc-chip__text">Add to calendar</div>
</div>

Trailing icon

<div class="mdc-chip">
  <div class="mdc-chip__text">Jane Smith</div>
  <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
</div>

CSS Classes

CSS Class	Description
`mdc-chip-set`	Mandatory. Indicates the set that the chip belongs to
`mdc-chip-set--choice`	Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
`mdc-chip-set--filter`	Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
`mdc-chip`	Mandatory.
`mdc-chip__text`	Mandatory. Indicates the text content of the chip
`mdc-chip__icon`	Optional. Indicates an icon in the chip
`mdc-chip__icon--leading`	Optional. Indicates a leading icon in the chip
`mdc-chip__icon--trailing`	Optional. Indicates a trailing icon in the chip

NOTE: Every element that has an mdc-chip__icon class must also have either the mdc-chip__icon--leading or mdc-chip__icon--trailing class.

Sass Mixins

To customize the colors of any part of the chip, use the following mixins.

Mixin	Description
`mdc-chip-set-spacing($gap-size)`	Customizes the amount of space between each chip in the set
`mdc-chip-corner-radius($radius)`	Customizes the corner radius for a chip
`mdc-chip-fill-color-accessible($color)`	Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards
`mdc-chip-fill-color($color)`	Customizes the background fill color for a chip
`mdc-chip-ink-color($color)`	Customizes the text ink color for a chip, and updates the chip's ripple color to match
`mdc-chip-selected-ink-color($color)`	Customizes text ink and ripple color of a chip in the selected state
`mdc-chip-stroke($width, $style, $color)`	Customizes the border stroke properties for a chip
`mdc-chip-stroke-width($width)`	Customizes the border stroke width for a chip
`mdc-chip-stroke-style($style)`	Customizes the border stroke style for a chip
`mdc-chip-stroke-color($color)`	Customizes the border stroke color for a chip

NOTE: mdc-chip-set-spacing also sets the amount of space between a chip and the edge of the set it's contained in.

`MDCChip` and `MDCChipSet`

The MDC Chips module is comprised of two JavaScript classes:

MDCChip defines the behavior of a single chip
MDCChipSet defines the behavior of chips within a specific set. For example, chips in an entry chip set behave differently from those in a filter chip set.

To use the MDCChip and MDCChipSet classes, import both classes from @material/chips.

`MDCChip`

Method Signature	Description
`toggleSelected() => void`	Proxies to the foundation's `toggleSelected` method

Property	Value Type	Description
`ripple`	`MDCRipple`	The `MDCRipple` instance for the root element that `MDCChip` initializes

`MDCChipSet`

Property	Value Type	Description
`chips`	Array<`MDCChip`>	An array of the `MDCChip` objects that represent chips in the set

Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`

`MDCChipAdapter`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the root element
`removeClass(className: string) => void`	Removes a class from the root element
`hasClass(className: string) => boolean`	Returns true if the root element contains the given class
`registerInteractionHandler(evtType: string, handler: EventListener) => void`	Registers an event listener on the root element
`deregisterInteractionHandler(evtType: string, handler: EventListener) => void`	Deregisters an event listener on the root element
`registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void`	Registers an event listener on the trailing icon element
`deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void`	Deregisters an event listener on the trailing icon element
`notifyInteraction() => void`	Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element
`notifyTrailingIconInteraction() => void`	Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with, which bubbles to the parent `mdc-chip-set` element

`MDCChipSetAdapter`

Method Signature	Description
`hasClass(className: string) => boolean`	Returns whether the chip set element has the given class
`registerInteractionHandler(evtType, handler) => void`	Registers an event handler on the root element for a given event
`deregisterInteractionHandler(evtType, handler) => void`	Deregisters an event handler on the root element for a given event

Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`

`MDCChipFoundation`

Method Signature	Description
`toggleSelected() => void`	Toggles the selected class on the chip element

`MDCChipSetFoundation`

None yet, coming soon.

@material/chips