2016-01-04 11:51:57 -08:00
# Material Design for Angular 2
2016-04-08 16:34:54 -07:00
[](https://www.npmjs.com/package/%2540angular2-material%2Fcore)
2016-01-19 13:23:11 -08:00
[](https://travis-ci.org/angular/material2)
2016-02-03 17:58:35 -08:00
[](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
2016-01-19 13:23:11 -08:00
2016-01-04 11:51:57 -08:00
This is the home for the Angular team's Material Design components built on top of Angular 2.
2016-03-08 21:15:52 -08:00
2016-09-02 01:05:05 -04:00
#### Quick links
[Google group ](https://groups.google.com/forum/#!forum/angular-material2 ),
[Contributing ](https://github.com/angular/material2/blob/master/CONTRIBUTING.md ),
[Plunker Template ](http://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview )
2016-03-15 11:01:18 -07:00
2016-09-02 01:05:05 -04:00
### Getting started
2016-03-15 11:01:18 -07:00
2016-09-02 01:05:05 -04:00
See our [Getting Started Guide ](https://github.com/angular/material2/blob/master/GETTING_STARTED.md )
if you're building your first project with Angular Material 2.
### Project status
Angular Material 2 is currently in alpha and under active development.
2016-03-15 11:01:18 -07:00
During alpha, breaking API and behavior changes will be occurring regularly.
2016-09-02 01:05:05 -04:00
Check out our [directory of design documents ](https://github.com/angular/material2/wiki/Design-doc-directory )
for more insight into our process.
2016-03-08 21:15:52 -08:00
2016-09-02 01:05:05 -04:00
If you'd like to contribute, you must follow our [contributing guidelines ](https://github.com/angular/material2/blob/master/CONTRIBUTING.md ).
You can look through the issues (which should be up-to-date on who is working on which features
and which pieces are blocked) and make a comment.
Also see our [`Good for community contribution` ](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+community+contribution%22 )
label.
2016-01-04 16:51:01 -08:00
2016-09-02 01:05:05 -04:00
High level items planned for September 2016:
* Work on Angular core towards 2.0.0 final
* Preparing for conferences (Angular Connect and ng-europe)
* Final features for dialog
* Initial version of snackbar.
* Additional behaviors for menu, start design for select.
* Finalize high-level design details for data-table.
#### Feature status:
2016-09-02 19:11:46 +02:00
| Feature | Status | Docs | Issue |
|------------------|-------------------------------------|--------------|----------------|
| button | Available | [README][1] | - |
| cards | Available | [README][2] | - |
| checkbox | Available | [README][3] | - |
| radio | Available | [README][4] | - |
| input | Available | [README][5] | - |
| sidenav | Available | [README][6] | - |
| toolbar | Available | [README][7] | - |
| list | Available | [README][8] | [#107 ][0107] |
| grid-list | Available | [README][9] | - |
| icon | Available | [README][10] | - |
| progress-circle | Available | [README][11] | - |
| progress-bar | Available | [README][12] | - |
| tabs | Available | [README][13] | - |
| slide-toggle | Available | [README][14] | - |
| button-toggle | Available | [README][15] | - |
| slider | Available | [README][16] | - |
| menu | Initial version, needs enhancements | [README][17] | [#119 ][0119] |
| tooltip | Initial version, needs enhancements | [README][18] | - |
| ripples | Available, but needs to be applied | [README][19] | [#108 ][0108] |
| dialog | Started, not yet ready for release | - | [#114 ][0114] |
| snackbar / toast | Proof-of-concept | - | [#115 ][0115] |
| select | Not started | - | [#118 ][0118] |
| textarea | Not started | - | [#546 ][0546] |
| autocomplete | Not started | - | [#117 ][0117] |
| chips | Not started | - | [#120 ][0120] |
| theming | Designed, no code yet | - | [#123 ][0123] |
| prod build | Not started | - | - |
| docs site | UX design and tooling in progress | - | - |
| typography | Not started | - | [#205 ][0205] |
| layout | Not started | - | - |
| fab speed-dial | Not started | - | [#860 ][0860] |
| fab toolbar | Not started | - | - |
| bottom-sheet | Not started | - | - |
| bottom-nav | Not started | - | [#408 ][0408] |
| virtual-repeat | Not started | - | [#823 ][0823] |
| datepicker | Not started | - | [#675 ][0675] |
| data-table | Not started | - | [#581 ][0581] |
| stepper | Not started | - | [#508 ][0508] |
2016-09-02 01:05:05 -04:00
[1]: https://github.com/angular/material2/blob/master/src/lib/button/README.md
[2]: https://github.com/angular/material2/blob/master/src/lib/card/README.md
[3]: https://github.com/angular/material2/blob/master/src/lib/checkbox/README.md
[4]: https://github.com/angular/material2/blob/master/src/lib/radio/README.md
[5]: https://github.com/angular/material2/blob/master/src/lib/input/README.md
[6]: https://github.com/angular/material2/blob/master/src/lib/sidenav/README.md
[7]: https://github.com/angular/material2/blob/master/src/lib/toolbar/README.md
[8]: https://github.com/angular/material2/blob/master/src/lib/list/README.md
[9]: https://github.com/angular/material2/blob/master/src/lib/grid-list/README.md
[10]: https://github.com/angular/material2/blob/master/src/lib/icon/README.md
[11]: https://github.com/angular/material2/blob/master/src/lib/progress-circle/README.md
[12]: https://github.com/angular/material2/blob/master/src/lib/progress-bar/README.md
[13]: https://github.com/angular/material2/blob/master/src/lib/tabs/README.md
[14]: https://github.com/angular/material2/blob/master/src/lib/slide-toggle/README.md
[15]: https://github.com/angular/material2/blob/master/src/lib/button-toggle/README.md
[16]: https://github.com/angular/material2/blob/master/src/lib/slider/README.md
[17]: https://github.com/angular/material2/blob/master/src/lib/menu/README.md
[18]: https://github.com/angular/material2/blob/master/src/lib/tooltip/README.md
[19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
2016-09-02 19:11:46 +02:00
[0107]: https://github.com/angular/material2/issues/107
[0119]: https://github.com/angular/material2/issues/119
[0108]: https://github.com/angular/material2/issues/108
[0114]: https://github.com/angular/material2/issues/114
[0115]: https://github.com/angular/material2/issues/115
[0118]: https://github.com/angular/material2/issues/118
[0546]: https://github.com/angular/material2/issues/546
[0117]: https://github.com/angular/material2/issues/117
[0120]: https://github.com/angular/material2/issues/120
[0123]: https://github.com/angular/material2/issues/123
[0205]: https://github.com/angular/material2/issues/205
[0860]: https://github.com/angular/material2/issues/860
[0408]: https://github.com/angular/material2/issues/408
[0508]: https://github.com/angular/material2/issues/508
[0823]: https://github.com/angular/material2/issues/823
[0675]: https://github.com/angular/material2/issues/675
[0581]: https://github.com/angular/material2/issues/581
2016-09-02 01:05:05 -04:00
"Available" means that the components or feature is published and available for use, but may still
be missing some behaviors or polish.
2016-01-15 11:53:24 -08:00
2016-01-04 16:51:01 -08:00
## The goal of Angular Material
Our goal is to build a set of high-quality UI components built with Angular 2 and TypeScript,
2016-04-05 09:45:27 -07:00
following the Material Design spec. These
2016-01-04 16:51:01 -08:00
components will serve as an example of how to write Angular code following best practices.
### What do we mean by "high-quality"?
* Internationalized and accessible so that all users can use them.
* Straightforward APIs that don't confuse developers.
* Behave as expected across a wide variety of use-cases without bugs.
* Behavior is well-tested with both unit and integration tests.
* Customizable within the bounds of the Material Design specification.
2016-03-14 12:24:22 -07:00
* Performance cost is minimized.
2016-01-04 16:51:01 -08:00
* Code is clean and well-documented to serve as an example for Angular devs.
## Browser and screen reader support
Angular Material supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge
We also aim for great user experience with the following screen readers:
* NVDA and JAWS with IE / FF / Chrome (on Windows).
* VoiceOver with Safari on iOS and Safari / Chrome on OSX.
* TalkBack with Chrome on Android.
