Material Design Web组件库-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00813/article/details/141210083

Material Design Web组件库

material-webMaterial Design Web Components项目地址:https://gitcode.com/gh_mirrors/ma/material-web

1. 项目介绍

Material Web Components (MWC) 是一个基于Web Components技术的开源库，它提供了遵循Google的Material Design规范的Web组件。这个库旨在帮助开发者构建美观且无障碍的网络应用程序。利用Material 3设计系统，MWC确保了与最新设计趋势的一致性。

2. 项目快速启动

安装依赖

在你的项目中，你可以通过npm安装MWC：

npm install @material/web

使用CDN

如果你希望不进行本地构建就能试用MWC，可以在HTML文件中引入CDN资源：

<!DOCTYPE html>
<html lang="en">
<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>
  <!-- 在这里添加你的MWC组件 -->
</body>
</html>

示例代码

以下是一个简单的MWC组件使用示例：

<form>
  <p class="md-typescale-body-medium">尝试这些表单控件:</p>
  <md-checkbox></md-checkbox>
  <md-radio name="group"></md-radio>
  <md-radio name="group"></md-radio>
  <md-outlined-text-field label="最爱的颜色" value="紫色"></md-outlined-text-field>
  <md-outlined-button type="reset">重置</md-outlined-button>
</form>