@ivanvanderbyl/ember-material-components-typography

ember-cli addon for @material/typography.

Installation

ember install @ivanvanderbyl/ember-material-components-typography

Usage

Mixins

• Typography

Other Topics

• Configuring automatic integration
• Roboto Font

Typography Mixin

The Typography mixin, when applied to a component, adds a typography attribute to the component. The typography attribute allows you to programmatically customize the typography of the component.

// app/components/mdc-foo
import Component from '@ember/component';
import Typography from '@ivanvanderbyl/ember-material-components-typography/mixins/typography';

export default Component.extend (Typography, {

});

The typography attribute must be one of the following values:

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

{{mdc-foo typography="headline4"}}

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
    }
  }
};

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.