ember-cli-mdc-icon-button

ember-cli addon for @material/icon-button

Usage no npm install needed!

<script type="module">
  import emberCliMdcIconButton from 'https://cdn.skypack.dev/ember-cli-mdc-icon-button';
</script>

README

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

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}}
                     @change={{action}} />

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.
  • @change - The action f(isOn) called when the button is toggled.

Examples

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