A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Bevezetés

Kezdjük el használni az mdui-t az mdui CDN-jén és egy egyszerű oldalsablonon keresztül.

Gyorskezdés

Az mdui használatának legegyszerűbb módja a CSS és JS fájlok közvetlen betöltése CDN-ről.

Ha csomagkezelőt szeretne használni vagy le szeretné tölteni a forrásfájlokat, kérjük, látogasson el a letöltési oldalra.

CSS fájl

Adja hozzá a következő <link> címkét a <head> elemhez, az összes többi stílusfájl elé.

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

JS fájl

Adja hozzá a következő <script> címkét az oldal végére, közvetlenül a </body> címke elé.

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

Az mdui nem függ semmilyen harmadik fél könyvtárától; a fenti két fájl beillesztése után azonnal használható.

Legegyszerűbb oldalsablon

Győződjön meg róla, hogy az oldala megfelel a legújabb tervezési és fejlesztési szabványoknak: használjon HTML5 doctype-ot, és tartalmazza a viewport meta címkét a responzivitás érdekében. Az oldalának így kell kinéznie:

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

Ez minden, ami egy teljes oldalhoz szükséges. Innen kezdve további komponenseket és tartalmakat adhat hozzá weboldala felépítéséhez.

Letöltés