ember-cli-mdc-typography

ember-cli-mdc-typography

ember-cli addon for @material/typography.

Installation

ember install ember-cli-mdc-typography

Components & Modifiers

• {{mdc-typography}}

mdc-typography

The {{mdc-typography}} modifier, when applied to an element, adds a typography attribute to the component. The typography attribute allows you to programmatically customize the typography of the component.

<div {{mdc-typography name}}></div>

The typography value must be one of the following values:

• headline1
• headline2
• headline3
• headline4
• headline5
• headline6
• subtitle1
• subtitle2
• body1
• body2
• caption
• button
• overline

Other Topics

• Configuring automatic integration
• Roboto Font

Configuring Automatic Integration

The typography package automatically adds the mdc-typography class to the root of the ember application. By default, this is the body HTML element. You an change the root element by changing the rootElement property in config/environment.js.

Disable integration

You can disable automatic typography integration by setting the ember-cli-mdc.typography.disabled property in config/environment.js.

let ENV = {
  // ...
  
  'ember-cli-mdc': {
    typography: {
      disabled: true,          // disable adding .mdc-typography class to root element
      autoLinkFont: false      // disable adding <link> tag for Roboto font
    }
  }
};

Roboto Font

The typography package automatically includes links to the Roboto fonts in your application.

Corber integration

When building a Corber application, the Roboto fonts are bundled with the application. This prevents the application from needing to download the fonts.