Skip to content
This repository has been archived by the owner on Jun 18, 2022. It is now read-only.

MDC (Material Design UI Components) plugin for Aurelia.

License

Notifications You must be signed in to change notification settings

arabsight/aurelia-mdc-plugin

Repository files navigation

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.

About

MDC (Material Design UI Components) plugin for Aurelia.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published