Material Design 是一个由 Google 开发的设计标准，目标是联合 Android、Web 和其他的平台，形成一个更具有连贯性、统一性的视觉设计和交互语言。在前端开发中， 使用 Material Design 可以使一款网站变得更加用户友好、简洁和现代化。
为了让开发人员更方便的使用 Material Design，以下是一些 Material Design 工具集的汇总，其中包含着每个工具的详细介绍，学习及指导意义，以及完整的示例代码。
1. Material Design Lite (MDL)
Material Design Lite (MDL) 是一个由 Google 开发的基于 Material Design 标准的简化版，支持所有主流浏览器，并且只需要少量的 JavaScript 库即可实现 Material Design 效果。MDL主要提供了一些基础 UI 组件，例如按钮，文本框以及它们的样式等等，使得通过 Web 技术快速构建 Material Design 风格的网站变得更加简单。
MDL 的文档非常详细，包含了超过 2 个小时的学习资料。在 MDL 的官网上我们可以下载包含完整 CSS、JavaScript 和示例代码的 zip 包，也可以使用 npm、bower 和 CDN 直接引用。
示例代码：
// www.javascriptcn.com code example
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Button</button>
</body>
</html>2. Materialize
Materialize 是一个基于 Material Design 标准的 CSS 框架，类似于 Twitter 的 Bootstrap。Materialize 主要提供了一些 Web 组件，例如表单组件、卡片等等，需要使用 JavaScript 来实现更复杂的组件，如轮播图、下拉菜单等等。
Materialize 的官网提供了详细的文档和教程，也有各种示例和代码样例。与 MDL 不同，Materialize 有自己的 CDN，但也可以通过 npm 和 bower 安装。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>3. Material UI
Material UI 是一个 React 组件库，用于实现 Material Design 风格的 Web 应用程序。Material UI 提供了一系列的 React 组件，包括按钮、卡片、菜单、表单等等，还可以使用主题等方式来自定义界面风格。通过使用 Material UI 开发 React 项目，可以将 Material Design 效果直接应用在项目中，提高项目的可读性和使用度。
Material UI 的文档概述了每个组件的使用方法、属性、样式和注意事项等等，使用 Material UI 并不需要特殊的构建工具或设置，可以通过 npm 直接下载并引入。
示例代码：
// www.javascriptcn.com code example
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1),
},
input: {
display: 'none',
},
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<div>
<Button variant="contained" color="primary" className={classes.button}>
Primary
</Button>
<Button variant="contained" color="secondary" className={classes.button}>
Secondary
</Button>
<Button variant="contained" color="default" className={classes.button}>
Default
</Button>
</div>
);
}4. Vuetify
Vuetify 是一个基于 Vue.js 的 Material Design 组件库，与 Material UI 类似使用 Vuetify 可以为 Web、移动端、桌面端应用程序提供统一的 Material Design 风格。Vuetify 提供了丰富的 Vue.js 组件，如表格、文本框、按钮等等。通过使用 Vuetify，可以轻松开发整洁漂亮的 Web 应用程序。
Vuetify 的文档详细描述了每个组件的层次和属性以及使用方法和示例代码，同时还提供了一些拓展图标和样式的 URL。Vuetify 可以使用 NPM 通过命令行进行安装并引入使用。
示例代码：
// www.javascriptcn.com code example
<template>
<v-btn color="primary">Primary</v-btn>
<v-btn color="secondary">Secondary</v-btn>
<v-btn color="error">Error</v-btn>
</template>
<script>
export default {};
</script>
<style>
.v-btn {
margin-right: 10px;
}
</style>Material Design 的目标是提供一种统一的设计语言，使得用户可以在不同平台中，通过相同的界面和交互方式操作不同的设备。以上列举了四个不同的 Material Design 工具集，可以满足不同开发者的需求、学习和应用。我们以此作为一个开端，希望探索并构建新的应用程序，共同改良和完善 Material Design 在前端开发中的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7e123a941bf7134e180e5