arabsight / aurelia-mdc-plugin

aurelia-mdc-plugin

Aurelia CLI:

• Install:

npm i -S material-components-web
npm i -S aurelia-mdc-plugin

• Bundle with Aurelia-CLI (requirejs):

add mdc & plugin to one of your bundle's dependencies in aurelia.json.

{
    "name": "material-components-web",
    "path": "../node_modules/material-components-web/dist",
    "main": "material-components-web",
    "resources": [
        "material-components-web.css"
    ]
},
{
    "name": "aurelia-mdc-plugin",
    "path": "../node_modules/aurelia-mdc-plugin/dist/amd",
    "main": "index"
}

• Register the plugin:

export function configure(aurelia) {
    ...
    aurelia.use.plugin('aurelia-mdc-plugin');
    ...
}

with WebPack:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-mdc-plugin'));

• import the css:

<require from="material-components-web/material-components-web.css"></require>

• Use it!

<button class="mdc-button
               mdc-button--raised
               mdc-button--primary
               mdc-ripple-surface">
    Print Greeting
</button>

• Add new or 3rd party MDC-web components:

aurelia.use.plugin('aurelia-mdc-plugin', mdc => mdc.addComponents({
    'mdc-selector': 'MDCClassName'
}));

The plugin automaticaly adds data-mdc-auto-init="MDCRipple" to the button above and initializes it, so you do not have to add it to any of the components available.