material-web README

The project's README from github.com/material-components/material-web. As one markdown file: README.md.

Material Web

A collection of Material web components

Published on npm Join our Discord Test status npm Downloads jsDelivr hits (npm)

@material/web is a library of web components that helps build beautiful and accessible web applications. It uses Material 3, the latest version of Google's open-source design system.

Note: MWC is in maintenance mode pending new maintainers.

Resources

Quick start

Tip: Using Angular? We recommend using Angular Material components instead.

This code snippet is a buildless example that loads @material/web from a CDN. Check out the quick start guide to install and build for production.

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <script type="importmap">
    {
      "imports": {
        "@material/web/": "https://esm.run/@material/web/"
      }
    }
  </script>
  <script type="module">
    import '@material/web/all.js';
    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';

    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
  </script>
</head>
<body>
  <h1 class="md-typescale-display-medium">Hello Material!</h1>
  <form>
    <p class="md-typescale-body-medium">Check out these controls in a form!</p>
    <md-checkbox></md-checkbox>
    <div>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
    </div>

    <md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>

    <md-outlined-button type="reset">Reset</md-outlined-button>
  </form>
  <style>
    form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  </style>
</body>

material-web (material-components/material-web)

Searching Database…

这是什么?Material Web(@material/web)是 Google 推出的 Web 组件库,实现了 Material 3(其开源设计系统的最新版本),用于构建无障碍的 Web 界面。
这是一个框架,还是一组即插即用的组件?它是一个基于 Lit 构建、遵循标准的 Web 组件库,而不是完整的框架,因此你可以把单个组件直接放进任何网页或应用中。
我该如何开始使用这些组件?最快的方式是使用无需构建、直接从 CDN 加载 @material/web 的示例;若要用于生产环境,则需按照快速入门指南正式安装并构建这些组件。
它依赖什么?这些组件基于 Lit 构建,另外还依赖 @lit/context、safevalues 和 tslib 等辅助库,因此 Lit 是核心运行时依赖。
这个项目还在积极维护吗?不再积极维护。README 中说明,项目目前处于维护模式,正在等待新的维护者加入,因此新功能的开发可能很慢,甚至完全没有。
如果我在用 Angular 开发,应该使用这个库吗?维护者明确建议,如果你使用的是 Angular,应改用 Angular Material 组件,而不是这个库。
它能在哪里运行?它是与框架无关的 Web 组件,可在浏览器中运行,任何 Web 应用都能使用,无论采用哪种 JS 框架(Angular 除外,在 Angular 中更推荐使用 Angular Material)。
什么是 Material 3?它是 Google 最新的开源设计系统,而本库是其组件和样式的官方 Web 组件实现。
在添加组件之前,我能先查看它有多大吗?可以。项目提供了包体积文档,方便你在引入每个组件之前了解其成本。
它在所有浏览器中都能用吗?README 指向了专门的浏览器支持和常见问题文档,这说明支持情况因浏览器而异,应针对你的目标浏览器进行核实。
Size
51.5 MB
Stars
11.3K
Age
8y
Commits · 90 Days