https://github.com/redpelicans/aurelia-material

Material design for Aurelia
https://github.com/redpelicans/aurelia-material

Last synced: 2 months ago
JSON representation

Material design for Aurelia

• Host: GitHub
• URL: https://github.com/redpelicans/aurelia-material
• Owner: redpelicans
• License: apache-2.0
• Created: 2015-07-16T14:18:37.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-23T21:12:40.000Z (almost 9 years ago)
• Last Synced: 2024-11-13T16:25:59.994Z (2 months ago)
• Language: JavaScript
• Size: 34.2 KB
• Stars: 48
• Watchers: 8
• Forks: 14
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - Aurelia Material - Another wrapper for Material Design Lite (Aurelia / Components)

README

        
# aurelia-material

Aurelia wrapper for [Material Design Lite](http://www.getmdl.io).

[Material Design Lite](http://www.getmdl.io) has been designed for static html sites. To use it on dynamic ones, we have to register explictly new DOM elements (see [MDL](http://www.getmdl.io/started/index.html#dynamic))

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

See online [Demo](http://redpelicans.github.io/aurelia-material-sample/)

### Principles

We created the `CustomAttribute` `mdl` in charge of the registration of dynamic elements (all elements after index.html will be associated dynamically to the DOM with Aurelia)

So instead of writing:

```

  add

```

You will write in your views:

```

  add

```

And that's all...

`mdl` values are : 

```

[ 'button',

  'textfield',

  'layout',

  'menu',

  'data-table',

  'tabs',

  'slider',

  'tooltip',

  'progress',

  'spinner',

  'badge',

  'switch',

  'radio',

  'icon-toggle',

  'checkbox',

  'snackbar' ]

```

Some MDL elements are not in the list because we don't have to register them, so we can use them as it.

### Install

1. In your project install the plugin via `jspm` with following command

```

  $ jspm install github:redpelicans/aurelia-material

```

2. Make sure you use [manual bootstrapping](http://aurelia.io/docs#startup-and-configuration). In order to do so open your `index.html` and locate the element with the attribute aurelia-app:

  ```html

  

  ...

```

  

3. Update  `main.js` in your `src` folder with following content:

  ```javascript

  export function configure(aurelia) {

    aurelia.use

      .standardConfiguration()

      .developmentLogging()

      // Install the plugin

      .plugin('redpelicans/aurelia-material');

    aurelia.start().then(a => a.setRoot());

  }

   ```

  

4. Include material design css in your `index.html`

  

  

  ```html

      

```

5. Use wrapped MDL components in your hml views as explained below.

See online [Demo](http://redpelicans.github.io/aurelia-material-sample/)