open-index/open-npm huggingface dataset:
npm package: @ivanvanderbyl/ember-material-components-typography
Description: ember-cli addon for @material/typography
Author: James H. Hill
Latest version: 0.77.1-alpha.2

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

ember-cli addon for [`@material/typography`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography).

Installation
------------

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

Usage
-----------------------

### Mixins

* [`Typography`](#typography-mixin)

### Other Topics
* [Configuring automatic integration](#configuring-automatic-integration)
* [Roboto Font](#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.

```javascript
// 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

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

Configuring Automatic Integration
------------------------------------

The typography package automatically adds the `mdc-typography` class to the
[root of the ember application](https://guides.emberjs.com/release/configuring-ember/embedding-applications/#toc_changing-the-root-element).
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`.

```javascript
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.