{"id":13454265,"url":"https://github.com/material-components/material-web","last_synced_at":"2025-05-13T11:04:59.716Z","repository":{"id":37035441,"uuid":"127049550","full_name":"material-components/material-web","owner":"material-components","description":"Material Design Web Components","archived":false,"fork":false,"pushed_at":"2025-04-24T18:59:35.000Z","size":51438,"stargazers_count":9868,"open_issues_count":150,"forks_count":950,"subscribers_count":200,"default_branch":"main","last_synced_at":"2025-05-13T11:04:41.243Z","etag":null,"topics":["component-","design-system","lit","lit-element","lit-html","material","material-design","material-you","material3","web","web-components"],"latest_commit_sha":null,"homepage":"https://material-web.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/material-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"docs/support.md","governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-27T21:46:51.000Z","updated_at":"2025-05-13T09:06:00.000Z","dependencies_parsed_at":"2023-12-18T23:00:09.498Z","dependency_job_id":"aba8b79a-66ba-4c5d-9adc-df102f22af47","html_url":"https://github.com/material-components/material-web","commit_stats":{"total_commits":4208,"total_committers":137,"mean_commits":"30.715328467153284","dds":0.748574144486692,"last_synced_commit":"c27bdee0277326b7e88876e266ea463d92aa67d5"},"previous_names":["material-components/material-components-web-components"],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-components%2Fmaterial-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-components%2Fmaterial-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-components%2Fmaterial-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-components%2Fmaterial-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/material-components","download_url":"https://codeload.github.com/material-components/material-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253929361,"owners_count":21985802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-","design-system","lit","lit-element","lit-html","material","material-design","material-you","material3","web","web-components"],"created_at":"2024-07-31T08:00:52.422Z","updated_at":"2025-05-13T11:04:59.688Z","avatar_url":"https://github.com/material-components.png","language":"TypeScript","readme":"# Material Web\n\n\u003cimg src=\"./docs/images/material-web.gif\"\n  title=\"Material web components\"\n  alt=\"A collection of Material web components\"\n  style=\"border-radius: 32px\"\u003e\n\n[![Published on npm](https://img.shields.io/npm/v/%40material%2Fweb)](https://www.npmjs.com/package/@material/web)\n[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord\u0026logoColor=fff\u0026label=%23material)](https://lit.dev/discord/)\n[![Test status](https://github.com/material-components/material-web/actions/workflows/test.yml/badge.svg)](https://github.com/material-components/material-web/actions/workflows/test.yml)\n[![npm Downloads](https://img.shields.io/npm/dm/%40material%2Fweb?label=npm%20downloads)](https://npm-stat.com/charts.html?package=%40material%2Fweb)\n[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/%40material%2Fweb)](https://www.jsdelivr.com/package/npm/@material/web?tab=stats)\n\n`@material/web` is a library of\n[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\u003c!-- {.external} --\u003e\nthat helps build beautiful and accessible web applications. It uses\n[Material 3](https://m3.material.io/)\u003c!-- {.external} --\u003e, the latest version of Google's\nopen-source design system.\n\n**Note:\n[MWC is in maintenance mode pending new maintainers](https://github.com/material-components/material-web/discussions/5642).**\n\n## Resources\n\n-   [Introduction](./docs/intro.md)\n-   [Roadmap](./docs/roadmap.md)\n-   [Component docs](./docs/components/)\n-   [Bundle size](./docs/size.md)\n-   [Browser support and FAQ](./docs/support.md)\n\n## Quick start\n\n\u003e Tip: Using Angular? We recommend using\n\u003e [Angular Material](https://material.angular.io/)\u003c!-- {.external} --\u003e components\n\u003e instead.\n\nThis code snippet is a buildless example that loads `@material/web` from a CDN.\nCheck out the [quick start](./docs/quick-start.md) guide to install and build\nfor production.\n\n\u003c!-- LINT.IfChange --\u003e\n\n```html\n\u003chead\u003e\n  \u003clink href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700\u0026display=swap\" rel=\"stylesheet\"\u003e\n  \u003cscript type=\"importmap\"\u003e\n    {\n      \"imports\": {\n        \"@material/web/\": \"https://esm.run/@material/web/\"\n      }\n    }\n  \u003c/script\u003e\n  \u003cscript type=\"module\"\u003e\n    import '@material/web/all.js';\n    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\n\n    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1 class=\"md-typescale-display-medium\"\u003eHello Material!\u003c/h1\u003e\n  \u003cform\u003e\n    \u003cp class=\"md-typescale-body-medium\"\u003eCheck out these controls in a form!\u003c/p\u003e\n    \u003cmd-checkbox\u003e\u003c/md-checkbox\u003e\n    \u003cdiv\u003e\n      \u003cmd-radio name=\"group\"\u003e\u003c/md-radio\u003e\n      \u003cmd-radio name=\"group\"\u003e\u003c/md-radio\u003e\n      \u003cmd-radio name=\"group\"\u003e\u003c/md-radio\u003e\n    \u003c/div\u003e\n\n    \u003cmd-outlined-text-field label=\"Favorite color\" value=\"Purple\"\u003e\u003c/md-outlined-text-field\u003e\n\n    \u003cmd-outlined-button type=\"reset\"\u003eReset\u003c/md-outlined-button\u003e\n  \u003c/form\u003e\n  \u003cstyle\u003e\n    form {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n    }\n  \u003c/style\u003e\n\u003c/body\u003e\n```\n\n\u003c!-- LINT.ThenChange(./g3doc/docs/quick-start.md) --\u003e\n","funding_links":[],"categories":["TypeScript","Real World","前端开发框架及项目","SCSS","Design Systems","material-design","Web Components"],"sub_categories":["Design Systems","其他_文本生成、文本对话","Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-components%2Fmaterial-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaterial-components%2Fmaterial-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-components%2Fmaterial-web/lists"}