aurelia-mdc-plugin

    0.5.4 • Public • Published

    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.

    Install

    npm i aurelia-mdc-plugin

    DownloadsWeekly Downloads

    13

    Version

    0.5.4

    License

    MIT

    Unpacked Size

    298 kB

    Total Files

    40

    Last publish

    Collaborators

    • arabsight