随着 Google 推出的 Material Design 排布风格的普及，前端工程师们需要在项目中使用各样的 UI 组件来展示出 Material Design 的美感和特性。在本文中，我们将共享 10 个必备的 Material Design UI 组件，它们不仅提升你的设计和开发技能，而且能够加速你的项目开发速度。
1. Material UI
Material UI 是一个 React 组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表单、对话框、图标等元素，并且是完全可自定义的。以下是一个 Material UI 按钮的例子：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------------------------
------ ------- -------- ---------- -
------ -
------- ------------------- ----------------
----
---------
-
-2. Materialize
Materialize 是一个 CSS 框架，与 Bootstrap 相似，但有更多的 Material Design 元素。它包括颜色、浮动按钮、卡片、图标和表单等元素，并且是使用 Sass 构建的。
以下是一个 Materialize 卡片的例子：
-- -------------------- ---- -------
---- -------------
---- -------------------
---- ------------------
----- ------------------------------
------
---- ---------------------
-----------
------
---- --------------------
-- -------------------
------
------3. Material Design Lite
Material Design Lite 是一个开源的轻量级 Material Design 框架，使用 HTML、CSS 和 JavaScript 构建。它包括按钮、卡片、表单、文本框、下拉选项等元素，还包括预定义的主题和颜色。
以下是一个 Material Design Lite 按钮的例子：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">点击这里</button>
4. Material-UIx
Material-UIx 是一个 Vue.js 组件库，提供了多种 Material Design 风格的组件。它包括按钮、卡片、表格、表单、下拉选项等元素，并支持 CSS 的自定义。
以下是一个 Material-UIx 卡片的例子：
-- -------------------- ---- -------
----------
---- -------------
---- -------------------
---- ------------------
----- ------------------------------
------
---- ---------------------
-----------
------
---- --------------------
-- -------------------
------
------
-----------5. Vuetify
Vuetify 是一个基于 Vue.js 和 Material Design 构建的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是完全可自定义的。
以下是一个 Vuetify 按钮的例子：
<template> <v-btn color="primary">点击这里</v-btn> </template>
6. Ant Design
Ant Design 是一个基于 React 和 Material Design 构建的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是可自定义的。
以下是一个 Ant Design 按钮的例子：
import React from 'react'
import { Button } from 'antd'
export default function MyButton() {
return <Button type="primary">点击这里</Button>
}7. Material Components for the Web
Material Components for the Web 是一个基于 Web 平台的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是可自定义的。
以下是一个 Material Components for the Web 按钮的例子：
<button class="mdc-button mdc-button--raised mdc-button--accent">点击这里</button>
8. Material Design Bootstrap
Material Design Bootstrap 是一个基于 Bootstrap 和 Material Design 的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是可自定义的。
以下是一个 Material Design Bootstrap 按钮的例子：
<button class="btn btn-primary waves-effect waves-light" type="button">点击这里</button>
9. React Toolbox
React Toolbox 是一个基于 React 和 Material Design 构建的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是可自定义的。
以下是一个 React Toolbox 按钮的例子：
import React from 'react'
import Button from 'react-toolbox/lib/button/Button'
export default function MyButton() {
return <Button label="点击这里" raised accent />
}10. Angular Material
Angular Material 是一个基于 Angular 和 Material Design 构建的组件库，提供了用于开发 Material Design 风格应用程序所需的所有元素。它包括按钮、卡片、表格、表单、下拉选项等元素，并且是可自定义的。
以下是一个 Angular Material 按钮的例子：
<mat-button color="primary">点击这里</mat-button>
结论
现在你已经了解了 10 个 Material Design 开发必备 UI 组件，它们都能帮助你在项目中实现美观的 Material Design 风格。我们推荐你根据项目的需要选择不同的组件库，以便快速地开发出高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774e9966d66e0f9aaf1aa66