Skip to content

Latest commit

 

History

History
135 lines (86 loc) · 3.1 KB

README.md

File metadata and controls

135 lines (86 loc) · 3.1 KB
Raw

Aurelia Mdc Bridge

versiondownloadslicense

Project page | GistRun

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">
    ...
  • Register the plugin in your main.js in src folder:
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

Trouble-shooting

In case of ENOSPC error, see https://stackoverflow.com/questions/22475849/node-js-what-is-enospc-error-and-how-to-solve

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