mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
mmalerba
183 lines
11 KiB
Markdown
183 lines
11 KiB
Markdown
# Material Design for Angular
|
|
[](https://www.npmjs.com/package/%40angular%2Fmaterial)
|
|
[](https://travis-ci.org/angular/material2)
|
|
[](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
|
|
|
This is the home for the Angular team's Material Design components built for and with Angular.
|
|
|
|
#### Quick links
|
|
[Documentation, demos, and guides][aio] |
|
|
[Google group](https://groups.google.com/forum/#!forum/angular-material2) |
|
|
[Contributing](https://github.com/angular/material2/blob/master/CONTRIBUTING.md) |
|
|
[Plunker Template](https://goo.gl/uDmqyY) |
|
|
[StackBlitz Template](https://goo.gl/wwnhMV)
|
|
|
|
### Getting started
|
|
|
|
See our [Getting Started Guide][getting-started]
|
|
if you're building your first project with Angular Material.
|
|
|
|
Check out our [directory of design documents](https://github.com/angular/material2/wiki/Design-doc-directory)
|
|
for more insight into our process.
|
|
|
|
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 [`help wanted`](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
|
|
label.
|
|
|
|
High level stuff planned for Q1 2018 (January - March):
|
|
* Research and prototyping for virtual-scroll
|
|
* Research and exploration for data visualization
|
|
* cdkTree and matTree
|
|
* cdk/dialog
|
|
* Switch build to bazel
|
|
* Overlay positioning improvements
|
|
* Research and prototyping for future Material Design updates
|
|
* Research and prototyping drag/drop features for the CDK
|
|
|
|
|
|
#### Available features
|
|
|
|
| Feature | Notes | Docs |
|
|
|------------------|--------------------------------------------------------|--------------|
|
|
| autocomplete | | [Docs][24] |
|
|
| button | | [Docs][1] |
|
|
| button-toggle | | [Docs][15] |
|
|
| cards | | [Docs][2] |
|
|
| checkbox | | [Docs][3] |
|
|
| chips | | [Docs][26] |
|
|
| data-table | More features coming in 2018 | [Docs][28] |
|
|
| datepicker | | [Docs][25] |
|
|
| dialog | | [Docs][22] |
|
|
| divider | | [Docs][35] |
|
|
| expansion-panel | | [Docs][32] |
|
|
| grid-list | | [Docs][9] |
|
|
| icon | | [Docs][10] |
|
|
| input | | [Docs][5] |
|
|
| list | Action list planned 2018 | [Docs][8] |
|
|
| menu | | [Docs][17] |
|
|
| paginator | | [Docs][29] |
|
|
| progress-bar | | [Docs][12] |
|
|
| progress-spinner | | [Docs][11] |
|
|
| radio | | [Docs][4] |
|
|
| ripples | | [Docs][19] |
|
|
| select | | [Docs][23] |
|
|
| sidenav | | [Docs][6] |
|
|
| slide-toggle | | [Docs][14] |
|
|
| slider | | [Docs][16] |
|
|
| snackbar / toast | | [Docs][21] |
|
|
| sort-header | | [Docs][30] |
|
|
| stepper | | [Docs][33] |
|
|
| tabs | | [Docs][13] |
|
|
| textarea | | [Docs][5] |
|
|
| toolbar | | [Docs][7] |
|
|
| tooltip | | [Docs][18] |
|
|
| ---------------- | ------------------------------------------------------ | ------------ |
|
|
| theming | | [Guide][20] |
|
|
| typography | | [Guide][27] |
|
|
| layout | See [angular/flex-layout][lay_rp] | [Wiki][0] |
|
|
| cdk | | [Docs][34] |
|
|
|
|
|
|
#### In progress, planned, and non-planned features
|
|
|
|
| Feature | Status | Docs | Issue |
|
|
|------------------|-------------------------------------|--------------|----------------|
|
|
| tree | In-progress ([sneak peek][31]) | - | [#3175][3175] |
|
|
| sticky-header | In-progress, planned Q2 2018 | - | [#474][0474] |
|
|
| virtual-repeat | Prototyping, planned Q1 2018 | - | [#823][0823] |
|
|
| badge | In-progress, planned Q1 2018 | - | [#3085][3058] |
|
|
| fab speed-dial | Not started, not planned | - | [#860][0860] |
|
|
| fab toolbar | Not started, not planned | - | - |
|
|
| bottom-sheet | Not started, not planned | - | [#8113][8113] |
|
|
| bottom-nav | Not started, not planned | - | [#408][0408] |
|
|
|
|
[0]: https://github.com/angular/flex-layout/wiki
|
|
[1]: https://material.angular.io/components/component/button
|
|
[2]: https://material.angular.io/components/component/card
|
|
[3]: https://material.angular.io/components/component/checkbox
|
|
[4]: https://material.angular.io/components/component/radio
|
|
[5]: https://material.angular.io/components/component/input
|
|
[6]: https://material.angular.io/components/component/sidenav
|
|
[7]: https://material.angular.io/components/component/toolbar
|
|
[8]: https://material.angular.io/components/component/list
|
|
[9]: https://material.angular.io/components/component/grid-list
|
|
[10]: https://material.angular.io/components/component/icon
|
|
[11]: https://material.angular.io/components/component/progress-spinner
|
|
[12]: https://material.angular.io/components/component/progress-bar
|
|
[13]: https://material.angular.io/components/component/tabs
|
|
[14]: https://material.angular.io/components/component/slide-toggle
|
|
[15]: https://material.angular.io/components/component/button-toggle
|
|
[16]: https://material.angular.io/components/component/slider
|
|
[17]: https://material.angular.io/components/component/menu
|
|
[18]: https://material.angular.io/components/component/tooltip
|
|
[19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/ripple.md
|
|
[20]: https://material.angular.io/guide/theming
|
|
[21]: https://material.angular.io/components/component/snack-bar
|
|
[22]: https://material.angular.io/components/component/dialog
|
|
[23]: https://material.angular.io/components/component/select
|
|
[24]: https://material.angular.io/components/component/autocomplete
|
|
[25]: https://material.angular.io/components/component/datepicker
|
|
[26]: https://material.angular.io/components/component/chips
|
|
[27]: https://material.angular.io/guide/typography
|
|
[28]: https://material.angular.io/components/component/table
|
|
[29]: https://material.angular.io/components/component/paginator
|
|
[30]: https://material.angular.io/components/component/sort
|
|
[31]: https://tina-material-tree.firebaseapp.com/simple-tree
|
|
[32]: https://material.angular.io/components/expansion/overview
|
|
[33]: https://material.angular.io/components/stepper/overview
|
|
[34]: https://material.angular.io/cdk/categories
|
|
[35]: https://material.angular.io/components/component/divider
|
|
|
|
[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
|
|
[0581]: https://github.com/angular/material2/issues/581
|
|
[3175]: https://github.com/angular/material2/issues/3175
|
|
[4191]: https://github.com/angular/material2/pull/4191
|
|
[0995]: https://github.com/angular/material2/pull/995
|
|
[0474]: https://github.com/angular/material2/pull/474
|
|
[8113]: https://github.com/angular/material2/issues/8113
|
|
[3058]: https://github.com/angular/material2/issues/3058
|
|
|
|
[aio]: https://material.angular.io
|
|
[getting-started]: https://material.angular.io/guide/getting-started
|
|
[lay_rp]: https://github.com/angular/flex-layout
|
|
|
|
|
|
## The goal of Angular Material
|
|
Our goal is to build a set of high-quality UI components built with Angular and TypeScript,
|
|
following the Material Design spec. These
|
|
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.
|
|
* Performance cost is minimized.
|
|
* 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.
|