Aurelia Mdc Bridge
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 installBuild and watch
npm startLint
npm run lintBuild only bridge components (production):
npm run buildBuild only docs (production):
npm run docsBuild bridge, docs, update changelog and git add all changes (production)
npm run releaseTests
Visual and console. No tests has been created yet. Contribute?
Pull Requests
Yes, please!