前端框架探索：MDUI
前端框架探索：MDUI
简介
MDUI全称Material Design User Interface，漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用。
官网地址：https://www.mdui.org/
开发文档：https://www.mdui.org/docs/
引入
若要使用MDUI，需要先下载或引用它。
请前往下载页面：https://www.mdui.org/docs/download
或者用CDN：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- MDUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- MDUI JavaScript -->
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
</body>
</html>
这样就成功在页面中引用了MDUI。
兼容性
样式
主题色
主色和强调色
Material Design 中的颜色分为主色（Primary）和强调色（Accent），每种颜色有多种不同的饱和度。
后面文档的 CSS 类名中，用 color 表示颜色名，degree 表示饱和度。
主色
主色共有 19 种颜色，包括：
red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
主色每种颜色都有 10 种饱和度：
强调色
强调色共有 16 种颜色，包括：
red
pink
purple
deep-purple
indigo
blue
light-blue
cyan teal
green
light-green
lime
yellow
amber
orange
deep-orange
强调色每种颜色都有 4 种饱和度：
a100
a200
a400
a700
背景色
.mdui-color-[color]-[degree]
背景颜色类名为 .mdui-color-[color]-[degree]。它在设置背景色的同时，还设置了背景色中的文本颜色和文本不透明度。
此外主色和强调色都有一个默认的背景颜色类：
.mdui-color-[color] 和 .mdui-color-[color]-500 等效。
.mdui-color-[color]-accent 和 .mdui-color-[color]-a200 等效。
例如：
代码：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- MDUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"/>
<title>Hello, world!</title>
</head>
<body>
<div class="mdui-color-blue">
114514
</div>
<!-- MDUI JavaScript -->
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
</body>
</html>
文本颜色
文本颜色
文本颜色类名为 mdui-text-color-[color]-[degree] 。
此外主色和强调色都有一个默认的文本颜色类：
.mdui-text-color-[color] 和 .mdui-text-color-[color]-500 等效。
.mdui-text-color-[color]-accent 和 .mdui-text-color-[color]-a200 等效。
例如
代码：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- MDUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"/>
<title>Hello, world!</title>
</head>
<body>
<p class="mdui-text-color-blue">
banana
</p>
<!-- MDUI JavaScript -->
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
</body>
</html>
此外，MDUI 还提供了带不透明度的黑色和白色的文本和图标颜色。
.mdui-text-color-black-* 用于浅色背景。
.mdui-text-color-white-* 用于深色背景。
组件
本部分将向您介绍MDUI组件。
