Material Design 是一个使用平面、清晰、简单图案，明确而友好的界面设计语言。它由 Google 推出，并已广泛应用于移动和网络应用程序界面设计。 Material Design Lite (MDL) 是一个轻量级的实现 Material Design 的框架，适用于 Web 页面设计和开发。
MDL 提供了多种预定义的 UI 元素和组件，包括按钮、文本字段、卡片、面板、抽屉、布局等等，它们都具有 Material Design 的风格和交互效果。本文将介绍如何使用 MDL 创建漂亮的网页布局和组件。
环境搭建
为了使用 MDL，需要先在 HTML 中引入相关的 CSS 和 JS 文件。推荐使用 CDN 库，在 <head> 里加入以下代码：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.min.css"> <script src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.min.js"></script>
注意：MDL 需要使用 Google 提供的 Material Icons 字体图标库。
创建 UI 元素
MDL 提供了丰富的UI元素和组件，可以通过 HTML 标签和 CSS 类来定义和使用。以下是一些常用的 UI 元素和组件的示例：
按钮
<button class="mdl-button mdl-js-button"> Click me! </button>
文本字段
<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 布局由网格系统和响应式设计组成。
-- -------------------- ---- -------
---- -----------------
---- --------------- -----------------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ------
------
---- ----------------------------------
---- -- ---- --
------
------
------
---- --------------- -----------------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ------
------
---- ----------------------------------
---- -- ---- --
------
------
------
------自定义样式
MDL 提供了多种 CSS 类来定义 UI 元素和组件的样式。可以根据需要自定义样式。以下是一个按钮的自定义样式的示例：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Click me! </button>
总结
MDL 是一款非常实用的框架，能够让我们快速创建漂亮的网页布局和组件。本文简单介绍了 MDL 的环境搭建、UI 元素和组件的创建、自定义样式等方面的内容，如果想要更深入的学习和使用 MDL，请查看官方文档或者其他相关资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b14ee968c7c53b0a84b76