概述

讓我們透過 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-TW">
  <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>

安裝