Skip to content

maxdobler/aurelia-mdl-plugin

 
 

Repository files navigation

Usage

  • With jspm:
jspm install material-design-lite
jspm install npm:aurelia-mdl-plugin
  • Register the plugin:
import 'aurelia-mdl-plugin';

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        ...
        .plugin('aurelia-mdl-plugin');

    aurelia.start().then(() => aurelia.setRoot());
}
  • Load mdl CSS:
<template>
    <require from="material-design-lite/material.css"></require>
    ...

    <!-- give it a try -->
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
        Button
    </button>
</template>

Using Aurelia CLI:

  • Install:
npm i -S material-design-lite
npm i -S aurelia-mdl-plugin
  • Configure aurelia.json:

add mdl & plugin to one of your bundle's dependencies.

{
    "name": "material-design-lite",
    "path": "../node_modules/material-design-lite/dist",
    "main": "material",
    "resources": [
        "material.css"
    ]
},
{
    "name": "aurelia-mdl-plugin",
    "path": "../node_modules/aurelia-mdl-plugin/dist/amd",
    "main": "index"
}
  • Register the plugin and require css file the same way.
  • if you want to use another color theme:

change the resources key:

"resources": [
    "material.deep_orange-blue.min.css"
]

import the css:

<require from="material-design-lite/material.deep_orange-blue.min.css"></require>

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%