MDUIDocs
Copia il link di llms.txtCopia il link di llms-full.txtVisualizza questa pagina in MarkdownDiscuti questa pagina con ChatGPTDiscuti la documentazione completa del progetto con ChatGPT
Colori preimpostati
Colore personalizzato
Estrai colore dallo sfondo
Seleziona uno sfondo
Guida introduttiva
Panoramica Installazione Guida rapida Supporto TypeScript Supporto IDE Localizzazione Domande frequenti
Sviluppo assistito dall'IA
Stili
Integrazione con i framework
Componenti
Funzioni
Librerie

Panoramica

Iniziamo aggiungendo mdui a un modello di pagina di base utilizzando un CDN.

Stai attualmente leggendo la documentazione per mdui 2!

Per la documentazione di mdui 1, visita www.mdui.org/docs/.

Primi Passi

Per utilizzare mdui, importa i file CSS e JS dal CDN.

Per le istruzioni di installazione tramite npm, fare riferimento alla sezione Installazione.

Importazione dei File

Aggiungi le seguenti righe al tag <head> della tua pagina:

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

Per utilizzare l'attributo icona (ad esempio, icon="search" in <mdui-button icon="search"></mdui-button>), includi il file CSS per l'icona. Consulta Utilizzo delle Icone Material per maggiori informazioni.

mdui funziona indipendentemente da librerie di terze parti ed è pronto per essere utilizzato una volta inclusi i file.

Modello di Pagina Più Semplice

Di seguito è riportato il modello di pagina più semplice. Puoi aggiungere più componenti e contenuti per costruire il tuo sito web.

<!doctype html>
<html lang="it">
  <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>
    <!-- Includi il file CSS dell'icona se utilizzi l'attributo icona -->

    <title>Ciao, mondo!</title>
  </head>
  <body>
    <mdui-button>Ciao, mondo!</mdui-button>
  </body>
</html>
In questa pagina