aurelia-mdc-plugin

Material Design Components plugin for Aurelia.

Usage no npm install needed!

<script type="module">
  import aureliaMdcPlugin from 'https://cdn.skypack.dev/aurelia-mdc-plugin';
</script>

README

aurelia-mdc-plugin

NPM

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.