概要

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="ja">
  <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>

次の章

インストール