aurelia-mdl

Aurelia wrapper for Material Design Lite. Base Source forked from Thanood/aurelia-material. with lots of credit to redpelicans/aurelia-material.

Merged into aurelia/skeleton-plugin

Depends on genadis/encapsulated-mdl.

Has support for mdl-selectfield

Material Design Lite has been designed for static html sites. To use it on dynamic ones, we have to register explictly new DOM elements (see MDL)

Aurelia MDL will do that for you transparently while keeping MDL flexibility.

##Usage

Principles

We created the CustomAttribute mdl in charge of the registration of dynamic elements.

So instead of writing:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

You will write in your views:

<button mdl="button" class="mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

mdl values are :

[ 'badge',
  'button',
  'card',
  'checkbox',
  'chip',
  'data-table',
  'dialog',
  'grid',
  'icon-toggle',
  'layout',
  'list',
  'menu',
  'mega-footer',
  'mini-footer',
  'progress',
  'radio',
  'slider',
  'snackbar',
  'spinner',
  'switch',
  'tabs',
  'textfield',
  'tooltip',
  
   // // Third party not MDL official
  'selectfield' 
]

Third party components such as selectfield are not hard dependencies, meaning they need to be added manualy as explained in below.

Install

Aurelia CLI

Install the package:

npm install aurelia-mdl --save

Add package configuration to aurelia.json:

 "dependencies": [
          {
            "name": "encapsulated-mdl",
            "path": "../node_modules/encapsulated-mdl/dist",
            "main": "material.min",
            "resources": [
              "material.blue_grey-red.min.css"
            ]
          },
          {
            "name": "aurelia-mdl",
            "path": "../node_modules/aurelia-mdl/dist/amd",
            "main": "index",
            "deps": ["encapsulated-mdl"]
          }
        ]

Notice the resources in encapsulated-mdl, add your favorite style.

In your app.hml (or wherever):

<require from="encapsulated-mdl/material.blue_grey-red.min.css"></require>

And in manual bootstrapping:

aurelia.use.plugin('aurelia-mdl');

Adding mdl-selectfield

Install the package:

npm install encapsulated-mdl-selectfield --save

Add package configuration to aurelia.json:

 "dependencies": [
          {
            "name": "encapsulated-mdl-selectfield",
            "path": "../node_modules/encapsulated-mdl-selectfield/dist",
            "main": "mdl-selectfield.min",
            "resources": [
              "mdl-selectfield.min.css"
            ],
            "deps": ["encapsulated-mdl"]
          }
        ]

And Add encapsulated-mdl-selectfield to deps of aurelia-mdl package configuration.

In your app.hml (or wherever):

<require from="encapsulated-mdl-selectfield/mdl-selectfield.min.css"></require>

mdl-selectfield does not respect styling it always uses the default...

In your app.js or main.js (must be js before usage of the component so it registers with mdl)

import 'encapsulated-mdl-selectfield';

JSPM

In your project install the plugin via jspm with following command

  $ jspm install npm:aurelia-mdl

or better yet add to your package.json jspm dependencies:

  "jspm": {
    "dependencies": {
      ...
      "encapsulated-mdl": "^1.2.0"
      "aurelia-mdl": "^0.4.0",
      ...
    }
  }

And in manual bootstrapping:

aurelia.use.plugin('aurelia-mdl');

Include material design css:

  <require from="encapsulated-mdl/material.amber-pink.min.css"></require>

Adding mdl-selectfield

Install the package:

jspm install npm:encapsulated-mdl-selectfield

or better yet add to your package.json jspm dependencies:

  "jspm": {
    "dependencies": {
      ...
      "encapsulated-mdl-selectfield": "^1.0.0"
      ...
    }
  }

In your app.hml (or wherever):

<require from="encapsulated-mdl-selectfield/mdl-selectfield.min.css"></require>

mdl-selectfield does not respect styling it always uses the default...

In your app.js or main.js (must be js before usage of the component so it registers with mdl)

import 'encapsulated-mdl-selectfield';

Events

Deprecated! Used to depend on aurelia-event-aggregator and publish mdl:component:upgrade for each upgraded element.

If you need a hook for upgrade done, you could use TaskQueue something like:

In your custom Element View

<template>
  <button mdl="button" ref="buttonElement"></button>
<template>

In your custom Element View-Model

import {customElement, inject, TaskQueue} from 'aurelia-framework';

@customElement('my-element')
@inject(TaskQueue)
export class MyElement {
  buttonElement;
  constructor(element, taskQueue) {
    this.taskQueue = taskQueue;
  }

  attached() {
    this.taskQueue.queueTask(() => {
      // this.buttonElement.MaterialButton is upgraded
    });
  }
}

Based on aurelia-skeleton-plugin

This skeleton is part of the Aurelia platform. It sets up a standard aurelia plugin using gulp to build your ES6 code with the Babel compiler. Karma/Jasmine testing is also configured.

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, please join our community on Gitter or use stack overflow. Documentation can be found in our developer hub. If you would like to have deeper insight into our development process, please install the ZenHub Chrome or Firefox Extension and visit any of our repository's boards.

Building The Code

To build the code, follow these steps.

1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
2. From the project folder, execute the following command:

npm install

3. Ensure that Gulp is installed. If you need to install it, use the following command:

npm install -g gulp

4. To build the code, you can now run:

gulp build

5. You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.

6. See gulpfile.js for other tasks related to generating the docs and linting.

Running The Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:

1. Ensure that the Karma CLI is installed. If you need to install it, use the following command:

npm install -g karma-cli

2. Ensure that jspm is installed. If you need to install it, use the following commnand:

npm install -g jspm

3. Install the client-side dependencies with jspm:

jspm install

4. You can now run the tests with this command:

karma start