Blox Material v1.0.0-beta.3

Chips

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

Action Chips

wb_sunny
Turn lights on
bookmark
Bookmark
alarm
Set alarm
directions
Get directions

Choice Chips

Extra Small
Small
Medium
Large
Extra Large

Filter Chips

message
Messages
notification_important
Notifications
warning
Warnings
error
Errors

Input Chips

face
claire
cancel
face
pete
cancel
face
anne
cancel

API

Directive: MdcChipIconDirective

Selector: [mdcChipIcon]

Directive for the (optional) leading or trailing icon of an mdcChip. Depenending on the position within the mdcChip the icon will determine whether it is a leading or trailing icon. Trailing icons must implement the functionality to remove the chip from the set, and must only be added to input chips (mdcChipSet="input"). Chips with a trailing icon must implement the remove event.

Property Description
@Output()
interact
EventEmitter<void>

Event emitted for trailing icon user interactions. Please note that chip removal should be handled by the remove output of the chip, not by a handler for this output.

Directive: MdcChipTextDirective

Selector: [mdcChipText]

Directive for the text of an mdcChip. Must be contained in an mdcChipPrimaryAction directive.

Directive: MdcChipPrimaryActionDirective

Selector: [mdcChipPrimaryAction]

Directive for the primary action element of a chip. The mdcChipPrimaryAction must contain the mdcChipText directive, and be contained by an mdcChipCell directive.

Directive: MdcChipCellDirective

Selector: [mdcChipCell]

Directive for the main content of a chip. This directive mus contain the mdcChipPrimaryActione directive, and must be the child of an mdcChip.

Directive: MdcChipDirective

Selector: [mdcChip]

Directive for a chip. Chips must be child elements of an mdcChipSet, and must contain an mdcChipCell, and may additionally contain an mdcChipIcon for the leading icon. An optional trailing icon must be wrapped in a second mdcChipCell.

Property Description
@Output()
interact
EventEmitter<void>

Event emitted for user interaction with the chip.

@Output()
remove
EventEmitter<void>

Event emitted when the user has removed (by clicking the trailing icon) the chip. This event must be implemented when the removable property is set, and the chip has a trailing icon. The implementation must remove the chip from the set. Without such implementation the directive will animate the chip out of vision, but will not remove the chip from the DOM.

@Output()
navigation
EventEmitter<{ key: string; source: ChipEventSource; }>

Event emitted when a navigation event has occured.

@Output()
selectedChange
EventEmitter<boolean>

Event emitted when the chip changes from not-selected to selected state or vice versa (for filter and choice chips).

@Input()
value
string

The value the chip represents. The value must be unique for the mdcChipSet. If you do not provide a value a unique value will be computed automatically.

@Input()
selected
boolean

The 'selected' state of the chip. Filter and choice chips are either selected or not selected. Making a choice chip selected, will make all other chips in that set not selected.

@Input()
removable
boolean

If set to a value other than false, clicking the trailing icon will animate the chip out of view, and then emit the remove output.

Directive: MdcChipSetDirective

Selector: [mdcChipSet]

Directive for a chip-set (a collection of mdcChip).

Property Description
@Input()
mdcChipSet
"choice" | "filter" | "input" | "action"

Chip sets by default contain 'action' chips. Set this value to choice, filter, input, or action to determine the kind of chips that are contained in the chip set.