Material Design 是 Google 推出的一套 UI 设计规范，它强调简洁、平面化的设计风格，以及具有层次感的动画效果。在前端开发中，我们可以使用 Material Design 的组件来快速搭建漂亮的界面。本文将介绍一个基于纯 CSS 实现的 Material 组件合集：Matter。
Matter 的特点
Matter 是一个完全基于纯 CSS 实现的 Material 组件库，没有任何 JavaScript 依赖。Matter 具有以下特点：
- 轻量级：Matter 只包含最常用的 Material 组件，在文件大小上更加轻盈。
- 易于定制：Matter 的样式都是基于 CSS 变量进行定义的，您可以轻松地自定义组件的颜色和尺寸等属性。
- 简单实用：Matter 的组件代码简单易懂，您可以轻松地将其集成到您的项目中。
Matter 的组件列表
目前，Matter 包含以下组件：
按钮（Button）
按钮是 Web 界面中最常见的组件之一。Matter 中的按钮支持多种不同的样式和交互效果，例如 raised、flat、icon 和 fab 等。
<button class="md-button md-raised">Raised Button</button> <button class="md-button md-flat">Flat Button</button> <button class="md-button md-icon">Icon Button</button> <button class="md-button md-fab">Fab Button</button>
卡片（Card）
卡片是一种常用的 UI 元素，它可以展示图片、文字和其他内容。Matter 中的卡片支持多种不同的样式和布局，例如标准卡片、卡片列表和卡片图像等。
-- -------------------- ---- -------
---- ----------------
---- --------------- ------------
---- ---------------------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- -----------------------
------- ---------------- ------------- -------------
------
------文本框（Input）
文本框是输入表单中最基本的元素之一。Matter 中的文本框支持多种不同的类型和状态，例如普通文本框、搜索框和错误提示等。
-- -------------------- ---- ------- ------ ------------------------------- ------ ----------- ------------- ---------------- ------------------ ---- ---------- ------ ------------------------------- ------ --------------- ------------- ---------------- ------------------ ---- ---------- ------ --------------------------- ------ ----------- ----------- --------------- ---------- ------------------------ ------ ------------------------- ------ ----------- ---------- --------------- --------- ------------------- ----- - ----- -------
菜单（Menu）
菜单是一种常用的 UI 元素，它可以展示多个选项供用户选择。Matter 中的菜单支持多种不同的类型和布局，例如下拉菜单、上下文菜单和导航菜单等。
-- -------------------- ---- -------
------- ---------------- -------- --------------------- -------------
---- ----------------
--- ---------------------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
------- ---------------- -------- ----------------------------- ------- -------------
---- ------------------------
--- ---------------------
------ ------------- ----------
------ ------------- ---------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------