MDUIDocs
Copier le lien llms.txtCopier le lien llms-full.txtVoir cette page en MarkdownDiscuter de cette page avec ChatGPTDiscuter de la documentation complète avec ChatGPT
Couleurs prédéfinies
Couleur personnalisée
Extraire du fond d'écran
Veuillez sélectionner un fond d'écran
Premiers pas
Aperçu Installation Démarrage rapide Prise en charge TypeScript Prise en charge des IDE Localisation Questions fréquentes
Développement assisté par l'IA
Styles
Intégration avec les frameworks
Composants
Fonctions
Bibliothèques

Aperçu

Commençons à utiliser mdui avec le CDN et un modèle de page simple.

Vous lisez la documentation de mdui 2 !

Pour la documentation de mdui 1, visitez www.mdui.org/docs/.

Démarrage rapide

La façon la plus simple d'utiliser mdui est d'inclure les fichiers CSS et JS directement depuis un CDN.

Pour installer mdui avec npm, consultez la section Installation.

Inclure les fichiers

Ajoutez le code suivant dans la balise <head> de votre page :

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

Si vous utilisez l'attribut icon d'un composant (par exemple <mdui-button icon="search"></mdui-button>), vous devez également inclure le fichier CSS des icônes. Voir Utiliser les icônes Material Icons.

mdui ne dépend d'aucune bibliothèque tierce. Une fois les fichiers inclus, tout fonctionne.

Modèle de page minimal

Voici un modèle de page minimal dans lequel vous pouvez ajouter des composants et du contenu pour construire un site.

<!doctype html>
<html lang="fr">
  <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>
    <!-- Si vous utilisez l'attribut icon d'un composant, incluez également le fichier CSS des icônes -->

    <title>Bonjour le monde !</title>
  </head>
  <body>
    <mdui-button>Bonjour le monde !</mdui-button>
  </body>
</html>
Sur cette page