前端框架探索：MDUI
前端框架探索：MDUI
簡介
MDUI全稱Material Design User Interface，漂亮、輕量且好用，它能讓你更輕松地開發(fā) Material Design 網(wǎng)頁應(yīng)用。
官網(wǎng)地址：https://www.mdui.org/
開發(fā)文檔：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" />
<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。
兼容性
樣式
主題色
主色和強(qiáng)調(diào)色
Material Design 中的顏色分為主色（Primary）和強(qiáng)調(diào)色（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 種飽和度：
強(qiáng)調(diào)色
強(qiáng)調(diào)色共有 16 種顏色，包括：
red
pink
purple
deep-purple
indigo
blue
light-blue
cyan teal
green
light-green
lime
yellow
amber
orange
deep-orange
強(qiáng)調(diào)色每種顏色都有 4 種飽和度：
a100
a200
a400
a700
背景色
.mdui-color-[color]-[degree]
背景顏色類名為 .mdui-color-[color]-[degree]。它在設(shè)置背景色的同時，還設(shè)置了背景色中的文本顏色和文本不透明度。
此外主色和強(qiáng)調(diào)色都有一個默認(rèn)的背景顏色類：
.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" />
<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] 。
此外主色和強(qiáng)調(diào)色都有一個默認(rèn)的文本顏色類：
.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" />
<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 還提供了帶不透明度的黑色和白色的文本和圖標(biāo)顏色。
.mdui-text-color-black-* 用于淺色背景。
.mdui-text-color-white-* 用于深色背景。
組件
本部分將向您介紹MDUI組件。
浙公網(wǎng)安備 33010602011771號