基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

简介

让我们通过 mdui 的 CDN 和一个最简单的页面模板来开始使用 mdui。

快速入门

使用 mdui 最简单的方式是直接从 CDN 引入 CSS 和 JS 文件。

如果你想使用包管理器或下载源文件，请前往下载页面。

CSS 文件

将以下 <link> 标签添加到 <head> 标签中，并放在所有其他样式文件之前。

<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">

JS 文件

将以下 <script> 标签添加到页面尾部，且在 </body> 标签之前。

<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

mdui 不依赖任何第三方库，引入上述两个文件后，即可正常使用。

最简单的页面模板

请确保你的页面遵循最新的设计和开发标准，即使用 HTML5 doctype，并包含 viewport meta 标签以支持响应式。因此，你的页面应该如下所示：

<!doctype html>
<html lang="zh-cn">
  <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">

    <!-- 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>

以上就是一个完整页面所需的全部内容。你可以在此基础上添加更多组件和内容，构建你的网站。

下载