ember-cli-mdc-icon-button

ember-cli addon for @material/icon-button.

Installation

ember install ember-cli-mdc-icon-button

Components

This package contains the following top-level components. *

• MdcIconButton
• MdcIconButtonToggle

MdcIconButton

Description

An icon that behaves like a button.

Usage

<MdcIconButton @icon={{name}} />

Attributes

• @icon - Name of an icon.

The component also support the standard HTML attributes allowed on the <button> element.

Examples

<MdcIconButton @icon="favorite" />
<MdcIconButton @icon="favorite" disabled={{this.disabled}} />

Listening for Button Clicks

Use the {{on "click"}} modifier to listen for clicks.

<MdcIconButton @icon="favorite" {{on "click" this.click}} />

MdcIconButtonToggle

Description

An icon button with toggle states.

Usage

<MdcIconButtonToggle @isOn={{this.on}}
                     @on={{hash icon=name label=label}}
                     @off={{hash icon=name label=label}}
                     @label={{label}} />

Attributes

• @isOn - The initial state of the toggle button
• @on - Hash of properties for the icon when the button is on.
• @off - Hash of properties for the icon when the button is off.
• @label - ARIA label for accessibility.

Events

• MdcIconButtonToggle:change - Toggle button has changed state.
  • detail.isOn - State of the toggle button

Examples

<MdcIconButtonToggle @on={{this.on}}
                     @on={{hash icon="favorite"}}
                     @off={{hash icon="favorite_border"}}
                     @label={{"Add to favorites"}}
        {{on "MdcIconButtonToggle:change" this.change}} />