Materialize CSS en Angular 9

Estoy haciendo mis pinitos con Materialize CSS, framework desarrollado por Google que implementa Material (directrices de diseño UI) y que es una clara alternativa a Bootstrap. He querido hacer una instalación limpia, sin añadir módulos a través del npm, así que me he bajado la última versión (1.0.0) del paquete Materialize. Es un simple zip con los CSS y los JS para desarrollo y producción (*.min).

Aquí tienes la URL de la web donde me lo descargué:

https://materializecss.com/getting-started.html

La manera en la que he metido este framework en mi proyecto ha sido muy sencillo. La estructura de un proyecto Angular es la siguiente:

  • Proyecto
    • e2e
    • node_modules
    • src
      • app
      • assets
      • enviroments

Lo que he hecho ha sido lo siguiente:

  1. Meter dentro de /assets/ la carpeta materialize/ del zip, descomprimida, lógicamente.
  2. Editar el fichero angular.json que está en Proyecto/ y añadir esto en la sección CSS (styles) y JS (scripts).
"styles": [
            "src/assets/materialize/css/materialize.css",
            "src/styles.css"
          ],
"scripts": [
            "src/assets/materialize/js/materialize.js"
           ]

Con esto ya estaría todo. Muy limpio, ¿verdad?. Lo que sí que hay que tener en cuenta es poner bien la ruta donde se encuentra la hoja de estilos y la librería Javascript.

Ya solo queda editar los correspondientes .html y añadir los elementos html con los estilos acorde a la hoja de estilos de Material.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.