Übersicht

Beginnen Sie mit mdui über das CDN und einer einfachen Seitenvorlage.

Sie lesen gerade die Dokumentation für mdui 2!

Für die Dokumentation von mdui 1 besuchen Sie bitte www.mdui.org/docs/.

Schnellstart

Der einfachste Weg, mdui zu verwenden, ist, die CSS- und JS-Dateien direkt über ein CDN einzubinden.

Wenn Sie mdui über npm installieren möchten, lesen Sie bitte das Kapitel Installation.

Dateien einbinden

Fügen Sie den folgenden Code in den <head>-Bereich Ihrer Seite ein:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

Wenn Sie die Symbolattribute der Komponenten verwenden möchten (z. B. das Attribut icon in <mdui-button icon="search"></mdui-button>), müssen Sie auch die CSS-Datei für die Symbole einbinden. Siehe Verwendung von Material Icons-Symbolen.

mdui ist nicht von Drittanbieter-Bibliotheken abhängig. Nach dem Einbinden der oben genannten Dateien funktioniert es wie erwartet.

Einfachste Seitenvorlage

Hier ist eine einfache Seitenvorlage, zu der Sie weitere Komponenten und Inhalte hinzufügen können, um eine Website zu erstellen.

<!doctype html>
<html lang="de">
  <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>
    <!-- Wenn Sie das icon-Attribut einer Komponente verwenden, müssen Sie auch die CSS-Datei für die Symbole einbinden -->

    <title>Hallo Welt!</title>
  </head>
  <body>
    <mdui-button>Hallo Welt!</mdui-button>
  </body>
</html>

Nächste Seite

Installation