mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Introduction

Commençons à utiliser mdui en utilisant le CDN de mdui et un modèle de page minimaliste.

Démarrage rapide

Le moyen le plus simple d’utiliser mdui consiste à inclure directement les fichiers CSS et JS depuis le CDN.

Si vous souhaitez utiliser un gestionnaire de paquets ou télécharger les fichiers sources, veuillez aller à la page de téléchargement.

Fichier CSS

Ajoutez la balise <link> suivante dans la balise <head>, et placez-la avant tous les autres fichiers de style.

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

Fichier JS

Ajoutez la balise <script> suivante à la fin de la page, juste avant </body>.

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

mdui ne dépend d’aucune bibliothèque tierce. Une fois les deux fichiers ci-dessus importés, il peut être utilisé normalement.

Le modèle de page le plus simple

Assurez-vous que votre page respecte les derniers standards de conception et de développement, c’est-à-dire qu’elle utilise un doctype HTML5 et inclut la balise meta viewport pour prendre en charge la réactivité. Votre page devrait donc ressembler à ceci :

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

C’est tout ce dont une page complète a besoin. Vous pouvez ensuite ajouter d’autres composants et contenus pour construire votre site.

Téléchargement