前端框架探索:MDUI

前端框架探索:MDUI

简介

MDUI全称Material Design User Interface,漂亮、轻量且好用,它能让你更轻松地开发 Material Design 网页应用。
官网地址:https://www.mdui.org/
开发文档:https://www.mdui.org/docs/
image
image

引入

若要使用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。

兼容性

image

样式

主题色

主色和强调色
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 等效。
例如:
image
代码:

<!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 等效。
例如
image
代码:

<!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组件。

posted @ 2023-05-14 13:08  oldhelps  阅读(381)  评论(0编辑  收藏  举报