Material Design Lite（MDL）是谷歌推出的一款开源的前端框架，它基于 Material Design 设计风格，提供了丰富的 UI 组件和样式，可以帮助开发者快速构建美观、易用的 Web 应用。本篇文章将介绍 MDL 的基本使用方法和实战案例，适合初学者入门学习。
安装和使用
MDL 可以通过 npm 安装，也可以直接下载源代码。如果使用 npm 安装，可以在命令行中输入以下命令：
npm install material-design-lite
安装完成后，在 HTML 文件中引入 MDL 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/material-design-lite/dist/material.min.css"> <script src="node_modules/material-design-lite/dist/material.min.js"></script>
然后就可以使用 MDL 提供的 UI 组件和样式了。例如，要创建一个按钮，可以这样写：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Click me </button>
这里使用了 MDL 提供的四个 CSS 类，分别是 mdl-button（按钮样式）、mdl-js-button（使按钮支持 JavaScript）、mdl-button--raised（按钮浮起来的效果）、mdl-button--colored（按钮颜色）。运行效果如下：
基本组件
MDL 提供了丰富的 UI 组件和样式，包括按钮、卡片、表单、图标、列表、菜单、滑动卡片、标签页、工具栏等。接下来，我们将介绍其中几个常用的组件。
卡片
卡片（Card）是一种常见的 UI 元素，用于展示内容，例如文章、图片、视频等。MDL 提供了卡片样式和一些常用的卡片组件，例如卡片标题、卡片文本、卡片图片、卡片操作按钮等。要创建一个简单的卡片，可以这样写：
<div class="mdl-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card Title</h2>
</div>
<div class="mdl-card__supporting-text">
Card Text
</div>
</div>这里使用了 MDL 提供的两个 CSS 类，分别是 mdl-card（卡片样式）和 mdl-card__title（卡片标题样式），以及一个卡片标题文本。运行效果如下：
表单
表单（Form）是 Web 应用中常见的 UI 元素，用于收集用户输入的数据。MDL 提供了表单样式和一些常用的表单组件，例如输入框、下拉框、单选框、复选框等。要创建一个简单的表单，可以这样写：
// javascriptcn.com 代码示例
<form action="#">
<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>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">Password</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Submit
</button>
</form>这里使用了 MDL 提供的三个 CSS 类，分别是 mdl-textfield（输入框样式）、mdl-js-textfield（使输入框支持 JavaScript）、mdl-textfield__input（输入框内部样式），以及两个输入框和一个提交按钮。运行效果如下：
实战案例
下面我们来实现一个简单的 TODO 应用，用于展示 MDL 的实际应用场景。该应用包含一个输入框和一个列表，用户可以在输入框中添加 TODO 项，然后在列表中展示它们。
HTML 结构
首先，我们需要创建一个 HTML 文件，并引入 MDL 的 CSS 和 JavaScript 文件。然后，在文件中创建一个输入框和一个列表，如下所示：
// javascriptcn.com 代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TODO App</title>
<link rel="stylesheet" href="node_modules/material-design-lite/dist/material.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">TODO App</span>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="todoInput">
<label class="mdl-textfield__label" for="todoInput">What needs to be done?</label>
</div>
</form>
</div>
<div class="mdl-cell mdl-cell--12-col">
<ul class="mdl-list" id="todoList">
</ul>
</div>
</div>
</main>
</div>
<script src="node_modules/material-design-lite/dist/material.min.js"></script>
</body>
</html>这里使用了 MDL 的网格布局（Grid），将页面分为两列，一列包含输入框，另一列包含列表。在输入框中，我们使用了 MDL 的浮动标签（Floating Label）样式，使输入框更加美观。
JavaScript 代码
接下来，我们需要编写 JavaScript 代码，实现添加 TODO 项的功能。我们可以使用 jQuery 或纯 JavaScript 实现，这里我们使用纯 JavaScript 实现，代码如下所示：
// javascriptcn.com 代码示例
<script>
function addTodo() {
var input = document.getElementById("todoInput");
var list = document.getElementById("todoList");
var item = document.createElement("li");
var text = document.createTextNode(input.value);
item.appendChild(text);
list.appendChild(item);
input.value = "";
}
document.getElementById("todoInput").addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
addTodo();
}
});
</script>这里定义了一个 addTodo 函数，用于添加 TODO 项。在函数中，我们首先获取输入框和列表的 DOM 元素，然后创建一个新的列表项，并将输入框中的文本添加到列表项中，最后将列表项添加到列表中。最后，我们监听输入框的键盘事件，如果用户按下了回车键，则调用 addTodo 函数添加 TODO 项。
运行效果
最后，我们打开浏览器，运行该应用，即可看到如下效果：
用户在输入框中输入 TODO 项，按下回车键后，该项就会添加到列表中。我们使用了 MDL 的样式和组件，使应用更加美观和易用。
总结
本篇文章介绍了 MDL 的基本使用方法和实战案例，适合初学者入门学习。MDL 提供了丰富的 UI 组件和样式，可以帮助开发者快速构建美观、易用的 Web 应用。在实际开发中，我们可以根据需要选择适合的组件和样式，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65854246d2f5e1655dfebb02