🎉 Material web components 1.0 release #5004
Replies: 22 comments 22 replies
-
|
Finally 🎆🚀🙌🏾 |
Beta Was this translation helpful? Give feedback.
-
|
Congratulations! It’s been really nice to use so far, and it’s been exciting to see Lit really get used to deliver this. Historically, a lot of Google web stuff has felt incredibly tied to the internal toolchains and felt a bit distant from the rest of the web, this doesn’t give me those vibes at all. |
Beta Was this translation helpful? Give feedback.
-
|
Yey, what a great news. U awesome! |
Beta Was this translation helpful? Give feedback.
-
|
If you want to use a CDN and don't mind downloading all the components at once, we recommend The only problem with esm.run is that it will not work if you intend to do individual component imports. If you want individual component imports and no bundling for CDN we recommend UNPKG with the |
Beta Was this translation helpful? Give feedback.
-
|
How we can implement app designs in web |
Beta Was this translation helpful? Give feedback.
-
|
I've read all the docs. I still can work out how to use this in my Angular 17 project. I do this, npm install @material/web, and then import a component, like this, import {MdOutlinedTextField} from '@material/web/textfield/outlined-text-field.js' After that I try import MdOutlinedTextField, into the component, but cannot , as it complains that the import is for standalone components only Then including this, Application bundle generation failed. [0.389 seconds] Sorry, I'm a beginner : ( |
Beta Was this translation helpful? Give feedback.
-
|
You can post a new Q&A discussion to get better help visibility! |
Beta Was this translation helpful? Give feedback.
-
|
Done! |
Beta Was this translation helpful? Give feedback.
-
|
Now it can finally be used for my website! |
Beta Was this translation helpful? Give feedback.
-
|
What a great documentation. Thanks a lot guys! |
Beta Was this translation helpful? Give feedback.
-
|
Great work, congratulations! Got it working with Angular fairly easy. So very nice customization of themes and colors, love it. Won't migrate fully from Angular Material yet, but happy this is coming along. |
Beta Was this translation helpful? Give feedback.
-
|
Any advice for getting this working with Angular? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much. I am going for a job being a web developer and designing is not very much my field of expertise. With this kind of material I can focus in what I like. Building solutions |
Beta Was this translation helpful? Give feedback.
-
|
super excited! just to check are touch events supported? |
Beta Was this translation helpful? Give feedback.
-
|
they should be. Please file GitHub issues if you run into touch issues |
Beta Was this translation helpful? Give feedback.
-
|
Congratulations on the launch! I am curious, will these components have any color compatibility with the theme of the Chrome browser in any way? It would be nice to have an option like that, given the fact that in Android the Material You apps (made by Google) are aligned with the color theme of the phone. |
Beta Was this translation helpful? Give feedback.
-
|
I don't think there is a web API for that (yet). |
Beta Was this translation helpful? Give feedback.
-
|
The Chrome OS team uses these components and are investigating a possible solution for this specifically for installed web apps. Depending on their findings and possible successes, hopefully we can investigate opening this up to Chrome in general |
Beta Was this translation helpful? Give feedback.
-
|
Congrats! We finally have an official component library to implement MD3 in our apps! |
Beta Was this translation helpful? Give feedback.
-
|
And also hope Angular Material is gonna catch up with this update soon! |
Beta Was this translation helpful? Give feedback.
-
|
here is a build-less DEMO https://jsbin.com/sojocuf/1/edit?html,output thank you for these awesome components 👍🏻 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
SSR DEMO https://stackblitz.com/edit/github-uiraud?file=src%2Fpages%2Findex.astro |
Beta Was this translation helpful? Give feedback.
-
|
I was waiting for this! As a designer, I'm a big fan of Material Design, and I want to bring alive my project with Material Web, unfortunately, many components are not yet ready like Navigation 💔 |
Beta Was this translation helpful? Give feedback.
-
|
Great project, but I thought this would be incorporated into Angular Material first? |
Beta Was this translation helpful? Give feedback.
-
|
Angular Material is currently working with our sister team that builds Material for an internal Google framework to share infrastructure. That team also builds a designer-reviewed reference implementation just like this library. Though, these components should work in Angular today. We intend to create wrappers for our components in React as to help smooth out the interaction in that framework, but nobody on our team has touched Angular in quite a few years. If you run into any issues / weirdness using this library in Angular, please file issues on us as we need to form an idea on what is missing and what we can do to plug those development inconsistencies to make developing with these components more idiomatic in Angular. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response, Elliot. Should we expect the Angular Material website to have a big overhaul in the documentation and look/feel, too? Just for reference, it would be appealing to see an Angular Material as strong as MUI is for React. |
Beta Was this translation helpful? Give feedback.
-
|
I would like to reiterate that this project is not Angular Material and currently not the basis for Angular Material components. I unfortunately do not have any insight into the future of Angular Material's documentation site. What we're hoping to do in this project is to build a super-fast, stable, maintainable, accessible, cross-platform, reference implementation of Material Design for use at Google as well as open source projects such as React, Lit, Vue, Svelte, SolidJS, etc. The Angular team is building Angular Material specifically for Angular users. In the meantime we don't mind accepting Angular issues to bridge the gap until NG Material 3 is ready, but know that their angular-focused library is in development and that we cannot ensure or promise API compatibility with the future Angular Material 3 library. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, Elliott! I appreciate the info. |
Beta Was this translation helpful? Give feedback.
-
|
What's the difference between this new repository release and this older one? https://github.com/material-components/material-components-web |
Beta Was this translation helpful? Give feedback.
-
|
The older one (we call it MDC) originally had a goal of being a framework-agnostic implementation for Material. In reality, the patterns we used were not as scalable as we wanted. We created MWC to replace it as a stronger framework-agnostic implementation using web components. The former MDC library is evolving to focus on supporting Angular Material. Both Material projects have different goals and needs, but are built from the same core foundation of Material tokens. We recommend using Angular Material for Angular projects since it offers more benefits due to its tight Angular integration, and MWC for multi-framework or non-Angular projects. |
Beta Was this translation helpful? Give feedback.
-
|
The old one implements Material 2. This repo implements the latest Material Design 3 guideline. |
Beta Was this translation helpful? Give feedback.
-
|
hi, what are difference wetween mui and this ? https://mui.com/material-ui/ |
Beta Was this translation helpful? Give feedback.
-
|
MUI is a third-party library that provides Material 2 components. This library is from Google and provides the latest Material 3 components. You can also mix and match them if you want to use a lot of MUI's great layout and app building utilities, or components that don't have an implementation here yet :) |
Beta Was this translation helpful? Give feedback.
-
|
Congratulations!!! |
Beta Was this translation helpful? Give feedback.
-
|
Very well done guys! It is finally a genuine web release. I am looking forward to seeing all the upcoming missing components 🤩 |
Beta Was this translation helpful? Give feedback.
-
|
Good job ✅✅🎉🎉 |
Beta Was this translation helpful? Give feedback.
-
|
I think it's imperfect, needs to be improved |
Beta Was this translation helpful? Give feedback.
-
|
Congrats on the improvement |
Beta Was this translation helpful? Give feedback.
and others
-
tl;dr MWC is 1.0 and ready to use in production!
After a long journey, Material Web has launched its 1.0 set of web components using Google's latest Material 3 design system!
Each component has been reviewed by Material 3 designers and accessibility engineers for use in production.
😱 🥳 👏
Thank you to everyone who participated in our beta and provided feedback ❤️
What's in 1.0?
<form>element supportCheck out our roadmap for what's coming next!
We're excited to help you build beautifully customized and accessible applications 🎉
The Material Web team
Beta Was this translation helpful? Give feedback.
All reactions