MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
与框架集成
组件
工具函数
独立包

概述

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

你正在阅读的是 mdui 2 的文档!

若要阅读 mdui 1 的文档,请访问 www.mdui.org/docs/

快速入门

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

如果你想使用 npm 安装 mdui,请参考 安装 章节。

引入文件

将下面代码添加到页面的 <head> 标签中:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

如果你需要使用组件的图标属性(例如 <mdui-button icon="search"></mdui-button> 中的 icon 属性),则还需要引入图标的 CSS 文件,参见 使用 Material Icons 图标

mdui 不依赖任何第三方库,引入上述文件后,就能正常工作了。

最简单的页面模板

下面是一个最简单的页面模板,你可以在其中添加更多组件和内容,来构建一个网站。

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

    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
    <!-- 如果使用了组件的 icon 属性,还需要引入图标的 CSS 文件 -->

    <title>Hello, world!</title>
  </head>
  <body>
    <mdui-button>Hello, world!</mdui-button>
  </body>
</html>
本页目录