Skip to content

Aurelia Mdc Bridge is a collection of wrappers for Material Design Components.

License

Notifications You must be signed in to change notification settings

doktordirk/aurelia-mdc-bridge

 
 

Repository files navigation

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

About

Aurelia Mdc Bridge is a collection of wrappers for Material Design Components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 56.5%
  • TypeScript 38.8%
  • CSS 4.7%