dvandenberg1999 / material

A lightweight Material Design library for Angular based on Google's Material Components for the Web.

Blox Material makes it possible to create beautiful Angular apps with modular and customizable UI components, designed according to the Material Design Guidelines. It integrates Material Components for the Web (a Google project) with the Angular framework.

Quick Links

• Documention, Demo & Examples
• Changelog
• News (via twitter)

Status

Component	Documentation
button	docs & demo
card	docs & demo
checkbox	docs & demo
chips	docs & demo
dialog	docs & demo
drawer	docs & demo
elevation	docs & demo
fab	docs & demo
form-field	see docs & demo for e.g. radio, and checkbox
grid-list	deprecated by the Material Components Web team
icon-button	docs & demo
icon-toggle	docs & demo
linear-progress	docs & demo
list	docs & demo
menu	docs & demo
radio	docs & demo
ripple	docs & demo
select	docs & demo
slider	docs & demo
snackbar	docs & demo
switch	docs & demo
tabs	docs & demo
text-field	docs & demo
toolbar	docs & demo
top-app-bar	docs & demo

The following material-components-web packages provide styling (scss, css) only. As such they can be consumed directly from your Angular app, and we see no reason to wrap their functionality in Angular components or directives. Just use the styles and sass mixins as documented by the material-components-web team:

Package	Documentation
image-list	image-list documentation
layout-grid	layout-grid documentation
shape	shape documentation
theme	theme documentation
typography	typography documentation

Building from source

If you want to code on the library itself, or build it from source for other reasons, here are some tips:

• Please run an npm install in the root directory first. The root directory contains git hooks and scripts for releasing/publishing new versions.
• The library code is in the directory bundle. You need to run npm install there, before e.g. building (npm run build) or testing (npm run test) the material library.
• The demo and documentation website is in the site directory. Before building, the site, you must have built the material bundle first.
• Check the package.json files for other commands that can be used to build, debug, test, release, or publish the library.
• Publishing a new bundle is handled by circleci. The commands for publishing/releasing a new version are in the root package.json. These commands create the appropriate tags and changes that are picked up by the circleci build to do an actual publish/deploy/distribution of a new version of the library.
• Please use commit messages according to the Angular Commit Message Guidelines.