El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Introducción

Comencemos con mdui usando la CDN de mdui y una plantilla de página muy sencilla.

Inicio rápido

La forma más sencilla de usar mdui es importar directamente los archivos CSS y JS desde la CDN.

Si deseas usar un gestor de paquetes o descargar los archivos fuente, por favor ve a la página de descargas.

Archivo CSS

Agrega la siguiente etiqueta <link> al <head> y colócala antes de todos los demás archivos de estilos.

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

Archivo JS

Agrega la siguiente etiqueta <script> al final de la página, justo antes de la etiqueta </body>.

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

mdui no depende de bibliotecas de terceros. Una vez incluidos los dos archivos anteriores, podrás empezar a usarlo.

Plantilla de página mínima

Asegúrate de que tu página siga los estándares más recientes de diseño y desarrollo, en concreto usando doctype HTML5 e incluyendo la etiqueta meta viewport para compatibilidad responsive. Tu página debería verse así:

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

Lo anterior contiene todo lo necesario para una página completa. Puedes añadir más componentes y contenido sobre esta base para construir tu sitio web.

Descarga