- 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>
- 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>