Aurelia Mdc Bridge

version downloads license

This plugin is in active development and your feedback is welcome

What is Aurelia Mdc Bridge?

Aurelia Mdc Bridge is a collection of wrappers for Material Design Components. You can easy use components and data-bind properties using Aurelia as your client framework.

What is Aurelia?

Aurelia is a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity.

What is Material Components?

Material Components provide a reliable development environment for apps and websites across Android, iOS, and the web.

Components are updated as the Material Design system evolves, ensuring consistent pixel-perfect implementation and adherence to Google’s front-end development standards, such as internationalization and accessibility support.

Getting started

Create a new or use an existing project with aurelia-cli.

au new material-test
...
cd material-test

Install aurelia-mdc-bridge:

au install aurelia-mdc-bridge

Include Material Design icons and fonts in index.html:

<html class="mdc-typography">
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    ...

export function configure(aurelia) {
  ...
    aurelia.use.plugin('aurelia-mdc-bridge')
  ...
}

Import the css in your app.html:

<require from="material-components-web/material-components-web.css"></require>

Use it:

<mdc-text-field value.bind="value">          
  Username
</mdc-text-field>            
<button mdc-button="raised: true;">Submit</button>

au run -w

Check out project page to add more components to your project.

Build from source

Install dependencies:

npm install

Build and watch

npm start

Lint

npm run lint

Build only bridge components (production):

npm run build

Build only docs (production):

npm run docs

Build bridge, docs, update changelog and git add all changes (production)

npm run release

Tests

Visual and console. No tests has been created yet. Contribute?

Pull Requests

Yes, please!

Guidelines

Ullfis / aurelia-mdc-bridge

readme