Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Wprowadzenie

Zacznijmy używać mdui za pomocą CDN mdui i najprostszego szablonu strony.

Szybki start

Najprostszym sposobem użycia mdui jest bezpośrednie zaimportowanie plików CSS i JS z CDN.

Jeśli chcesz użyć menedżera pakietów lub pobrać pliki źródłowe, przejdź do strony pobierania.

Pliki CSS

Dodaj poniższy znacznik <link> do znacznika <head>, przed wszystkimi innymi plikami stylów.

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

Pliki JS

Dodaj poniższy znacznik <script> na końcu strony, przed znacznikiem </body>.

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

mdui nie zależy od żadnych bibliotek zewnętrznych. Po zaimportowaniu powyższych dwóch plików możesz zacząć go używać.

Najprostszy szablon strony

Upewnij się, że Twoja strona jest zgodna z najnowszymi standardami projektowania i programowania, tj. używa doctype HTML5 i zawiera tag meta viewport dla responsywności. Twoja strona powinna wyglądać następująco:

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

Powyższy kod to wszystko, czego potrzebujesz dla pełnej strony. Na tej podstawie możesz dodawać więcej komponentów i treści, aby zbudować swoją witrynę.

Pobieranie