Node's Package Magician

    aurelia-mdl

    0.4.4 • Public • Published

    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

    ZenHub Join the chat at https://gitter.im/aurelia/discuss

    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
    1. Ensure that Gulp is installed. If you need to install it, use the following command:
    npm install -g gulp
    1. To build the code, you can now run:
    gulp build
    1. You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.

    2. 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
    1. Ensure that jspm is installed. If you need to install it, use the following commnand:
    npm install -g jspm
    1. Install the client-side dependencies with jspm:
    jspm install
    1. You can now run the tests with this command:
    karma start

    Install

    npm i aurelia-mdl

    DownloadsWeekly Downloads

    12

    Version

    0.4.4

    License

    CC0-1.0

    Last publish

    Collaborators

    • genadis