基於 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>

以上就是一個完整頁面所需的全部內容。你可以在此基礎上新增更多元件和內容，建構你的網站。

下載