Material Design Lite（简称 MDL）是一个基于 Google Material Design 设计语言的前端框架，它提供了一系列的组件和样式库，可以帮助开发者快速构建符合 Material Design 风格的网站。
在本文中，我们将介绍如何使用 MDL 组件，并提供一份示例代码，帮助读者快速掌握 MDL 的使用方法。
1. 下载 MDL
首先，我们需要从 MDL 的官方网站（https://getmdl.io/）上下载 MDL 的代码库。在下载页面中，我们可以选择下载压缩包或者使用 NPM 安装。
下载完成后，我们可以将 MDL 的代码库放置在项目目录下，并在 HTML 文件中引入相关的 CSS 和 JavaScript 文件。
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ---------------- ----------------------------------
------- -----------------------------------------
-------
------
---- ---- ---
-------
-------2. 使用 MDL 组件
MDL 提供了许多常用的组件，包括按钮、卡片、表格、文本框等等。我们可以在 HTML 文件中使用这些组件，并通过 CSS 类来设置其样式和行为。
2.1 按钮
MDL 的按钮组件包括普通按钮、扁平按钮、凸起按钮、悬浮按钮等等。我们可以使用以下代码来创建一个普通按钮：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Click me </button>
其中，mdl-button 类表示这是一个 MDL 按钮组件，mdl-js-button 类表示这是一个 JavaScript 可交互的按钮，mdl-button--raised 类表示这是一个凸起按钮，mdl-button--colored 类表示这个按钮有颜色。
2.2 卡片
MDL 的卡片组件可以用来展示内容，包括标题、图片、文本等等。我们可以使用以下代码来创建一个卡片：
-- -------------------- ---- -------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ----------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- -----
----- ------ ------- ------ ------- ---- ---------
----- --------- ----- --------- -------- -------------
---- ------- ------ ---- --- -------------
------
------其中，mdl-card 类表示这是一个卡片组件，mdl-shadow--2dp 类表示卡片有一个 2dp 的阴影效果，mdl-card__title 类表示卡片的标题，mdl-card__supporting-text 类表示卡片的内容。
2.3 表格
MDL 的表格组件可以用来展示数据，包括表头、表格内容等等。我们可以使用以下代码来创建一个表格：
-- -------------------- ---- -------
------ --------------------- ----------------- -----------------
-------
----
--- ---------------------------------------------------
------------
---------------
-----
--------
-------
----
--- ----------------------------------------------------
-----------
---------------
-----
----
--- --------------------------------------------------
-----------
-------------
-----
--------
--------其中，mdl-data-table 类表示这是一个表格组件，mdl-js-data-table 类表示这是一个 JavaScript 可交互的表格，mdl-shadow--2dp 类表示表格有一个 2dp 的阴影效果，mdl-data-table__cell--non-numeric 类表示这个单元格不是数字类型。
2.4 文本框
MDL 的文本框组件可以用来输入文字，包括单行文本框、多行文本框等等。我们可以使用以下代码来创建一个单行文本框：
<div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username"> <label class="mdl-textfield__label" for="username">Username</label> </div>
其中，mdl-textfield 类表示这是一个文本框组件，mdl-js-textfield 类表示这是一个 JavaScript 可交互的文本框，mdl-textfield__input 类表示这是一个输入框，mdl-textfield__label 类表示这是一个标签。
3. 示例代码
下面是一个使用 MDL 组件的示例代码，包括按钮、卡片、表格和文本框：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ---------------- ----------------------------------
------- -----------------------------------------
-------
------
------- ----------------- ------------- ------------------ ---------------------
----- --
---------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ----------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- -----
----- ------ ------- ------ ------- ---- ---------
----- --------- ----- --------- -------- -------------
---- ------- ------ ---- --- -------------
------
------
------ --------------------- ----------------- -----------------
-------
----
--- ---------------------------------------------------
------------
---------------
-----
--------
-------
----
--- ----------------------------------------------------
-----------
---------------
-----
----
--- --------------------------------------------------
-----------
-------------
-----
--------
--------
---- -------------------- ------------------
------ ---------------------------- ----------- --------------
------ ---------------------------- -------------------------------
------
-------
-------4. 总结
本文介绍了如何使用 MDL 组件，并提供了一份示例代码。通过学习本文，读者可以快速掌握 MDL 的使用方法，从而快速构建符合 Material Design 风格的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513c03795b1f8cacdc2e5ad