È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Introduzione

Iniziamo a usare mdui tramite il CDN di mdui e un modello di pagina semplicissimo.

Guida rapida

Il modo più semplice per utilizzare mdui è importare i file CSS e JS direttamente dal CDN.

Se desideri utilizzare un gestore di pacchetti o scaricare i file sorgente, visita la pagina dei download.

File CSS

Aggiungi il seguente tag <link> all'interno del tag <head>, posizionandolo prima di tutti gli altri file di stile.

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

File JS

Aggiungi il seguente tag <script> alla fine della pagina, prima del tag </body>.

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

mdui non dipende da alcuna libreria di terze parti; dopo aver importato i due file sopra indicati, può essere utilizzato normalmente.

Il modello di pagina più semplice

Assicurati che la tua pagina segua i più recenti standard di progettazione e sviluppo, ovvero utilizzi il doctype HTML5 e includa il tag meta viewport per supportare la reattività. Pertanto, la tua pagina dovrebbe apparire come segue:

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

Quanto sopra è tutto ciò di cui hai bisogno per una pagina completa. Su questa base, puoi aggiungere altri componenti e contenuti per costruire il tuo sito web.

Download