介绍
Material Design Lite（简称 MDL）是 Google 推出的一套轻量级 Material Design 设计风格的前端框架。它基于 Web Components 技术，提供了丰富的 UI 组件和样式，可以快速帮助开发者构建符合 Material Design 风格的 Web 应用程序。
本文将介绍如何使用 MDL 快速捆绑你的款式，包括如何引入 MDL，如何使用 MDL 的样式和组件，以及如何自定义 MDL 样式。
引入 MDL
在使用 MDL 前，需要先引入 MDL 的 CSS 和 JavaScript 文件。可以通过以下两种方式引入：
直接下载
可以从 MDL 的官方网站（https://getmdl.io）下载 MDL 的 CSS 和 JavaScript 文件，然后在 HTML 的 head 标签中分别引入：
<link rel="stylesheet" href="path/to/material.min.css"> <script src="path/to/material.min.js"></script>
使用 CDN
也可以使用 CDN 引入 MDL 的 CSS 和 JavaScript 文件：
<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 样式
MDL 提供了一套符合 Material Design 风格的样式，可以通过在 HTML 元素上添加相应的 class 来使用。以下是一些常用的 MDL 样式：
按钮样式
MDL 提供了四种按钮样式：raised、flat、fab 和 mini-fab。可以通过添加相应的 class 来使用：
-- -------------------- ---- ------- ---- ------ ------ --- ------- ----------------- ------------- ------------------ --------------------- ------ ------ --------- ---- ---- ------ --- ------- ----------------- ------------- ------------------ ------------------- -------------------- ---- ------ --------- ---- --- ------ --- ------- ----------------- ------------- --------------- --------------------- -- ------------------------------ --------- ---- -------- ------ --- ------- ----------------- ------------- --------------- -------------------- --------------------- -- ------------------------------ ---------
文本框样式
MDL 提供了三种文本框样式：text、textarea 和 floating-label。可以通过添加相应的 class 来使用：
-- -------------------- ---- ------- ---- ---- ----- --- ---- -------------------- ------------------ ------ ---------------------------- ----------- -------------- ------ ---------------------------- ------------------------------- ------ ---- -------- ----- --- ---- -------------------- ------------------ --------- ---------------------------- ----------- -------- ---------------------------- ------ ---------------------------- ------------------------------------- ------ ---- -------------- ----- --- ---- -------------------- ---------------- ------------------------------- ------ ---------------------------- ----------- -------------- ------ ---------------------------- ------------------------------- ------
卡片样式
MDL 提供了卡片样式，可以用来展示内容。可以通过添加相应的 class 来使用：
-- -------------------- ---- -------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ----------
------
---- ----------------------------------
---- -------
------
---- ------------------------ ------------------
------- ----------------- ------------- ------------------ ---------------------
------ ------
---------
------
------使用 MDL 组件
MDL 提供了很多 UI 组件，包括菜单、对话框、标签页等。可以通过 JavaScript 来初始化和使用这些组件。
初始化组件
需要先在 JavaScript 中引入 MDL 的组件模块：
import { MDLComponentName } from 'material-design-lite';然后可以通过以下方式来初始化组件：
const element = document.querySelector('.mdl-component');
const component = new MDLComponentName(element);使用组件
初始化组件后，可以通过 JavaScript 来使用组件的 API。以下是一些常用的 MDL 组件和 API：
菜单组件
import { MDLMenu } from 'material-design-lite';
const menu = new MDLMenu(document.querySelector('.mdl-menu'));
menu.toggle();对话框组件
import { MDLDialog } from 'material-design-lite';
const dialog = new MDLDialog(document.querySelector('.mdl-dialog'));
dialog.showModal();标签页组件
import { MDLTab } from 'material-design-lite';
const tab = new MDLTab(document.querySelector('.mdl-tabs'));
tab.changeTab(0);自定义 MDL 样式
如果需要自定义 MDL 样式，可以通过覆盖 MDL 的 CSS 样式来实现。以下是一些常用的 MDL 样式：
颜色样式
可以通过覆盖 MDL 的颜色变量来自定义颜色样式：
:root {
--mdl-color-primary: #2196F3;
--mdl-color-accent: #FFC107;
}字体样式
可以通过覆盖 MDL 的字体变量来自定义字体样式：
:root {
--mdl-font-family: 'Roboto', sans-serif;
--mdl-font-size-small: 12px;
--mdl-font-size-medium: 14px;
--mdl-font-size-large: 18px;
}组件样式
可以通过覆盖 MDL 的组件样式来自定义组件样式：
.mdl-button {
border-radius: 0;
font-weight: bold;
}示例代码
以下是一个使用 MDL 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
----- ---------------- --------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
-------
------
------- ----------------- ------------- ------------------ ---------------------
------ ------
---------
---- -------------------- ------------------
------ ---------------------------- ----------- --------------
------ ---------------------------- -------------------------------
------
---- --------------- -----------------
---- ------------------------
--- --------------------------------- ----------
------
---- ----------------------------------
---- -------
------
---- ------------------------ ------------------
------- ----------------- ------------- ------------------ ---------------------
------ ------
---------
------
------
-------
-------总结
使用 MDL 可以快速捆绑符合 Material Design 风格的款式，提高 Web 应用程序的用户体验。本文介绍了如何引入 MDL、使用 MDL 的样式和组件，以及如何自定义 MDL 样式。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66101cccd10417a2220b3825