mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
99 lines
3.4 KiB
Markdown
99 lines
3.4 KiB
Markdown
# Material Web
|
|
|
|
Material
|
|
[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
|
|
is a UI toolkit to build customizable and accessible web applications.
|
|
|
|
[Material 3](https://m3.material.io/)<!-- {.external} --> is the latest version of
|
|
Google's open-source design system.
|
|
|
|
> Tip: Using Angular? We recommend using
|
|
> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
|
|
> instead.
|
|
|
|
**Resources**
|
|
|
|
- [Introduction](docs/intro.md)
|
|
|
|
## Roadmap
|
|
|
|
**Alpha** components are in-development and may have many frequent breaking
|
|
changes.
|
|
|
|
**Beta** components are mostly polished and ready for use, but may still have
|
|
breaking changes.
|
|
|
|
**Stable** components are reviewed, documented, and API complete.
|
|
|
|
- ❌ Not started
|
|
- 🟡 In progress
|
|
- ✅ Complete
|
|
|
|
### `v1.0.0` (2023)
|
|
|
|
Component | Alpha | Beta | Stable
|
|
----------------------------- | :---: | :--: | :----:
|
|
Button | ✅ | ✅ | ✅
|
|
FAB | ✅ | ✅ | ✅
|
|
Icon button | ✅ | ✅ | ✅
|
|
Checkbox | ✅ | ✅ | ✅
|
|
Chips | ✅ | ✅ | ✅
|
|
Dialog | ✅ | ✅ | ✅
|
|
Divider | ✅ | ✅ | ✅
|
|
Elevation | ✅ | ✅ | ✅
|
|
Focus ring | ✅ | ✅ | ✅
|
|
Field | ✅ | ✅ | 🟡
|
|
Icon | ✅ | ✅ | ✅
|
|
List | ✅ | ✅ | ✅
|
|
Menu | ✅ | ✅ | 🟡
|
|
Progress indicator (circular) | ✅ | ✅ | ✅
|
|
Progress indicator (linear) | ✅ | ✅ | ✅
|
|
Radio button | ✅ | ✅ | ✅
|
|
Ripple | ✅ | ✅ | ✅
|
|
Select | ✅ | ✅ | 🟡
|
|
Slider | ✅ | ✅ | 🟡
|
|
Switch | ✅ | ✅ | ✅
|
|
Tabs | ✅ | ✅ | 🟡
|
|
Text field | ✅ | ✅ | 🟡
|
|
|
|
### Future
|
|
|
|
These features are planned for a future release.
|
|
|
|
Component | Alpha | Beta | Stable
|
|
----------------- | :---: | :--: | :----:
|
|
Autocomplete | ❌ | ❌ | ❌
|
|
Badge | 🟡 | ❌ | ❌
|
|
Banner | ❌ | ❌ | ❌
|
|
Bottom app bar | ❌ | ❌ | ❌
|
|
Bottom sheet | ❌ | ❌ | ❌
|
|
Segmented button | 🟡 | ❌ | ❌
|
|
Card | ❌ | ❌ | ❌
|
|
Data table | ❌ | ❌ | ❌
|
|
Date picker | ❌ | ❌ | ❌
|
|
Navigation bar | 🟡 | ❌ | ❌
|
|
Navigation drawer | 🟡 | ❌ | ❌
|
|
Navigation rail | ❌ | ❌ | ❌
|
|
Search | ❌ | ❌ | ❌
|
|
Snackbar | ❌ | ❌ | ❌
|
|
Time picker | ❌ | ❌ | ❌
|
|
Tooltip | ❌ | ❌ | ❌
|
|
Top app bar | ❌ | ❌ | ❌
|
|
|
|
## Browser support
|
|
|
|
This project aims to support the latest two major versions of browsers at the
|
|
time of each release.
|
|
|
|
Current browsers and versions supported:
|
|
|
|
Browser | Version
|
|
------- | -------
|
|
Chrome | 112 +
|
|
Edge | 112 +
|
|
Firefox | 113 +
|
|
Safari* | 16.4 +
|
|
|
|
*\* previous versions of Safari may be supported with an
|
|
[`ElementInternals` polyfill](https://www.npmjs.com/package/element-internals-polyfill).*
|