aurelia-mdc-plugin
Aurelia CLI:
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 "
}
export function configure ( aurelia ) {
...
aurelia . use . plugin ( ' aurelia-mdc-plugin ' ) ;
...
}
with WebPack:
aurelia . use . plugin ( PLATFORM . moduleName ( ' aurelia-mdc-plugin ' ) ) ;
< require from = " material-components-web/material-components-web.css " > < / require >
< 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.