MDUIDocs
Copiar enlace llms.txtCopiar enlace llms-full.txtVer esta página en formato MarkdownDiscutir esta página con ChatGPTDiscutir la documentación completa del proyecto con ChatGPT
Color preestablecido
Color personalizado
Extraer color del fondo de pantalla
Selecciona una imagen de fondo
Primeros pasos
Visión general Instalación Uso rápido Soporte para TypeScript Soporte para IDE Localización Preguntas frecuentes
Desarrollo asistido por IA
Estilos
Integración con frameworks
Componentes
Funciones
Paquetes independientes

Visión general

Empieza a usar mdui con el CDN de mdui y una plantilla de página sencilla.

¡Estás leyendo la documentación de mdui 2!

Para leer la documentación de mdui 1, visita www.mdui.org/docs/.

Inicio rápido

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

Si quieres instalar mdui mediante npm, consulta la sección Instalación.

Importar archivos

Agrega el siguiente código a la etiqueta <head> de la página:

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

Si necesitas usar el atributo de ícono de los componentes (por ejemplo, icon="search" en <mdui-button icon="search"></mdui-button>), también debes importar el archivo CSS de íconos. Consulta Uso de Material Icons.

mdui no depende de ninguna biblioteca de terceros; después de importar los archivos anteriores, funcionará correctamente.

Plantilla de página más simple

Esta es la plantilla de página más simple. Puedes agregar más componentes y contenido para construir un sitio web.

<!doctype html>
<html lang="es">
  <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 usas el atributo icon de los componentes, también necesitas importar el archivo CSS de íconos -->

    <title>¡Hola, mundo!</title>
  </head>
  <body>
    <mdui-button>¡Hola, mundo!</mdui-button>
  </body>
</html>
Contenido de esta página