[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3812":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":15,"starSnapshotCount":15,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},3812,"material-components-web","material-components\u002Fmaterial-components-web","material-components","Modular and customizable Material Design UI components for the web","https:\u002F\u002Fmaterial.io\u002Fdevelop\u002Fweb",null,"TypeScript",17071,2135,11,0,1,6,44.99,"MIT License",true,false,"master",[24,25,7,26,27],"css","javascript","material-design","web","2026-06-12 02:00:54","[![Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fmaterial-components-web.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmaterial-components-web)\n[![Chat](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F259087343246508035.svg)](https:\u002F\u002Fdiscord.gg\u002Fmaterial-components)\n\nNote:\n\nThis project is no longer actively maintained. While automated updates may\nstill occur, the team will not be prioritizing new features or bug fixes, and\nthose updates will be turned off in the future.\n\nFor Angular users, our friends at Angular Material moved away from this\nlibrary, and they expect that this may actually allow for faster iteration - see\ntheir [blog post](https:\u002F\u002Fblog.angular.dev\u002Fthe-future-of-material-support-in-angular-7fa0662ecc4b)\nfor more information.\n\n# Material Components for the web\n\nMaterial Components for the web helps developers execute [Material Design](https:\u002F\u002Fwww.material.io).\nDeveloped by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.\n\nMaterial Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client\u002Fserver rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.\n\nMaterial Components for the web is the successor to [Material Design Lite](https:\u002F\u002Fgetmdl.io\u002F). In addition to implementing the [Material Design guidelines](https:\u002F\u002Fmaterial.io\u002Fdesign), it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically [architected](docs\u002Fcode\u002Farchitecture.md) for adaptability to various [major web frameworks](docs\u002Fframework-wrappers.md).\n\n> NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows\n> [semver](https:\u002F\u002Fsemver.org\u002F) so you can control when you incorporate them.\n> We typically follow a 2-week release schedule which includes one major release per month with breaking changes,\n> and intermediate patch releases with bug fixes.\n\n## Important links\n\n- [Getting Started Guide](docs\u002Fgetting-started.md)\n- [Demos](https:\u002F\u002Fmaterial-components.github.io\u002Fmaterial-components-web-catalog) (external site)\n- [Material on other frameworks](docs\u002Fframework-wrappers.md)\n- [Examples using Material Web](docs\u002Fexamples.md)\n- [Contributing](CONTRIBUTING.md)\n- [Material Design Guidelines](https:\u002F\u002Fmaterial.io\u002Fdesign) (external site)\n- [Supported browsers](docs\u002Fsupported-browsers.md)\n- [All Components](packages\u002F)\n- [Changelog](.\u002FCHANGELOG.md)\n\n## Quick start\n\n### Using via CDN\n\n```html\n\u003C!-- Required styles for Material Web -->\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fmaterial-components-web@latest\u002Fdist\u002Fmaterial-components-web.min.css\">\n\n\u003C!-- Render textfield component -->\n\u003Clabel class=\"mdc-text-field mdc-text-field--filled\">\n  \u003Cspan class=\"mdc-text-field__ripple\">\u003C\u002Fspan>\n  \u003Cspan class=\"mdc-floating-label\" id=\"my-label\">Label\u003C\u002Fspan>\n  \u003Cinput type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n  \u003Cspan class=\"mdc-line-ripple\">\u003C\u002Fspan>\n\u003C\u002Flabel>\n\n\u003C!-- Required Material Web JavaScript library -->\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fmaterial-components-web@latest\u002Fdist\u002Fmaterial-components-web.min.js\">\u003C\u002Fscript>\n\u003C!-- Instantiate single textfield component rendered in the document -->\n\u003Cscript>\n  mdc.textField.MDCTextField.attachTo(document.querySelector\u003CHTMLElement>('.mdc-text-field'));\n\u003C\u002Fscript>\n```\n\n> Please see [quick start demo](https:\u002F\u002Fcodepen.io\u002Fabhiomkar\u002Fpen\u002FgQWarJ) on codepen for full example.\n\n### Using NPM\n\n> This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full [getting started guide](docs\u002Fgetting-started.md). You can also see the final code and result in the [Material Starter Kit](https:\u002F\u002Fglitch.com\u002F~material-starter-kit).\n\nInstall textfield node module to your project.\n\n```\nnpm install @material\u002Ftextfield\n```\n\n#### HTML\n\nSample usage of text field component. Please see [Textfield](packages\u002Fmdc-textfield) component page for more options.\n\n```html\n\u003Clabel class=\"mdc-text-field mdc-text-field--filled\">\n  \u003Cspan class=\"mdc-text-field__ripple\">\u003C\u002Fspan>\n  \u003Cinput type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n  \u003Cspan class=\"mdc-floating-label\" id=\"my-label\">Label\u003C\u002Fspan>\n  \u003Cspan class=\"mdc-line-ripple\">\u003C\u002Fspan>\n\u003C\u002Flabel>\n```\n\n#### CSS\n\nLoad styles required for text field component.\n\n```scss\n@use \"@material\u002Ffloating-label\u002Fmdc-floating-label\";\n@use \"@material\u002Fline-ripple\u002Fmdc-line-ripple\";\n@use \"@material\u002Fnotched-outline\u002Fmdc-notched-outline\";\n@use \"@material\u002Ftextfield\";\n\n@include textfield.core-styles;\n\n```\n\n#### JavaScript\n\nImport `MDCTextField` module to instantiate text field component.\n\n```js\nimport {MDCTextField} from '@material\u002Ftextfield';\nconst textField = new MDCTextField(document.querySelector\u003CHTMLElement>('.mdc-text-field'));\n```\n\nThis'll initialize text field component on a single `.mdc-text-field` element.\n\n> Please see [quick start demo](https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fremix\u002Fnew-web) on glitch for full example.\n\n## Need help?\n\nWe're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our [Discord Channel](https:\u002F\u002Fdiscord.gg\u002Fmaterial-components).\n","Material Components for the web 是一套模块化且可定制的 Material Design UI 组件库，用于构建美观和功能强大的网页。该项目采用 TypeScript 编写，提供丰富的 CSS 和 JavaScript 组件，支持自定义主题、颜色、字体、形状等，以适应不同设计需求。它不仅适用于简单的静态网站，也能集成到复杂的前端应用或混合渲染系统中，无论开发者是否使用其他框架，都能轻松地将这些组件融入现有项目。尽管官方不再积极维护此项目，但其成熟的架构与广泛的兼容性依然使其成为许多 Web 开发场景下的优秀选择。",2,"2026-06-11 02:56:24","top_language"]