ember-cli-mdc-banner v3.0.16

ember-cli-mdc-banner

ember-cli addon for @material/banner

Installation

ember install ember-cli-mdc-banner

Styles

@use "@material/banner" as banner

Basic Example

The <MdcBanner /> is used to create a basic banner.

<MdcBanner @open={{this.openBanner}} @icon="error">
    There was a problem processing a transaction on your credit card.
</MdcBanner>

Attributes

• open - Show/Hide the banner.
• icon - Icon to show in the banner
• stacked - Position the text below the actions instead of alongside it

Banner w/ Actions

You can use the <:actions /> named block to add one or two actions to the banner. If you add more than two actions to a banner, then only the first two actions will be recognized.

If you include <:actions />, then you must place the banner content inside the <:default /> named block. Otherwise, the application will not compile.

<MdcBanner @icon="error" @open={{this.openBanner}}>
  <:default>
    There was a problem processing a transaction on your credit card.
  </:default>

  <:actions>
    <MdcButton @label="Learn more" {{on "click" this.learnMore}} />
    <MdcButton @label="Fix it" {{on "click" this.fixIt}} />
  </:actions>
</MdcBanner>