Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Einführung

Beginnen wir mit der Nutzung von mdui über das mdui CDN und eine sehr einfache Seitenvorlage.

Kurzanleitung

Die einfachste Methode zur Nutzung von mdui besteht darin, die CSS- und JS-Dateien direkt über ein CDN einzubinden.

Wenn Sie einen Paketmanager verwenden oder die Quelldateien herunterladen möchten, besuchen Sie bitte die Download-Seite.

CSS-Datei

Fügen Sie das folgende <link>-Tag in das <head>-Tag ein, und zwar vor allen anderen Stylesheet-Dateien.

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

JS-Datei

Fügen Sie das folgende <script>-Tag am Ende der Seite, unmittelbar vor dem </body>-Tag ein.

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

mdui ist von keinen Bibliotheken von Drittanbietern abhängig. Nach dem Einbinden der beiden oben genannten Dateien kann es normal verwendet werden.

Einfachste Seitenvorlage

Stellen Sie sicher, dass Ihre Seite den neuesten Design- und Entwicklungsstandards entspricht, d. h. den HTML5-Doctype verwendet und das Viewport-Meta-Tag für Responsive Design enthält. Ihre Seite sollte daher wie folgt aussehen:

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

Das ist alles, was für eine vollständige Seite benötigt wird. Auf dieser Grundlage können Sie weitere Komponenten und Inhalte hinzufügen, um Ihre Website aufzubauen.

Download