Material Design for AngularJS Apps
=======
Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
This project is still in early preview. It is a complementary effort to the Polymer project's paper elements collection.
Please note that using Angular Material requires the use of Angular 1.3.x or higher.
Demo Site
You can see these components in action at http://material.angularjs.org.
Or you run build the docs and demos locally. See the Documentation README for details.
Development
This project is in early development via a small core team of Ionic Framework and AngularJS developers. We don't have guidelines yet for broader community involvement, although we hope to have some soon.
For issues, including progress on accessibility support for these UI elements, see the Issue Tracker.
See CONTRIBUTING.md for information on structure, documentation, and code conventions.
Usage
In its current early state, use AngularJS Material Design at your own risk. APIs are changing rapidly.
If you wish to use angular-material anyway, you can:
a. bower install angular-material
to the get latest stable release (or download the files directly from the bower-material repository).
b. bower install angular-material#master
to get the version just committed to master (less stable than a release).
View the README in the bower-material repository for how to get started.
File Structure
- Components belong in
src/components/{componentName}
- Component modules must be named
material.components.{componentName}
- Templates for directives are declared inline
- Gulp builds files to
dist
folder, which is not version controlled (read below)
Commit Conventions
- http://github.com/ajoslin/conventional-changelog
- git commit-msg hook available here. Place it in
.git/hooks/commit-msg
, and runchmod +x .git/hooks/commit-msg
. It will validate your commit messages for you.
Development
npm install
for gulp depsgit submodule update --init
to add icons subfolderbower install
for angular depsgulp build
(aliasgulp
) to build, add--release
flag to uglify & strip console.log.gulp watch
to build & rebuild on changesgulp validate
to test and jshintgulp jshint
to run jshintgulp karma
to test oncegulp karma-watch
to test & watch for changesgulp docs
to build docs into dist/docs
Documentation
- See
docs/README.md
.