Angular-cli y componentes de Material Design

¡Seguimos con la serie de posts sobre Angular 2 (#itsJustAngular) y Angular-cli!

Al final del post de introducción dijimos que explicaríamos cómo añadir Angular Material a nuestro proyecto para utilizar componentes UI siguiendo las directrices que marca Google en su guía de estilos Material Design. Como lo prometido es deuda, ¡aquí lo tenéis!

A los que no hayáis leído en el post de introducción a Angular-cli, os recomiendo que lo leáis antes de seguir con este, ya que utilizaremos un proyecto creado con Angular-cli.

Para empezar, crearemos un nuevo proyecto con estilos sass, ya que nos brinda más opciones que el css normal.

$ ng new ng-iron-material --style=sass

Y bajamos a la carpeta recién creada.

$ cd ng-iron-material

Instalación e importanción de Angular Material

Una vez creado nuestro proyecto, instalaremos Angular Material mediante npm:

$ npm install --save @angular/material

O si queremos tener las últimas modificaciones del repositorio antes de que saquen una versión oficial:

$ npm install --save https://github.com/angular/material2-builds.git

Después de instalar el paquete hay que importar el módulo MaterialModule. Para ello, editaremos el módulo principal de nuestra aplicación que se encuentra en el archivo app.module.ts en la carpeta src/app.

Al final de los imports que vienen por defecto, tenemos que añadir nuestro import:

Y a continuación lo importaremos en la sección imports del @NgModule:

Así de simple, no hace falta hacer nada más para empezar a utilizar los componentes UI de Material. Para comprobarlo, editaremos el archivo app.component.html añadiendo unos botones.

Servimos el proyecto con el comando serve de Angular-cli:

$ ng serve

y cargamos la dirección localhost:4200 para ver el siguiente resultado:

Materia Design sin iconos

Vemos que los botones tienen el diseño esperado y que al hacer click sobre ellos responden con los efectos deseados. Sin embargo, el botón circular (el elemento md-fab) contiene un icono de Material Design que no se visualiza bien. Para poder utilizar los iconos que nos proporciona Google en su web oficial de Material, tenemos que incluir las fuente de dichos iconos.

Iconos

Para poder utilizar los iconos listados en Material.io tenemos que añadir la siguiente línea en el index.html.

Guardamos el archivo y esperamos a que Angular-cli recargue la página para ver que ahora el icono del botón se ve bien.

Material Design con iconos

Ya tenemos listos los iconos, pero los botones se ven un poco tristes; no tienen color 🙁 Para darles un poco de personalidad añadiremos un theme.

Temas de estilo

Para poder utilizar los colores en dichos componentes, hay que incluir un theme prefabricado o crear uno personalizado. Para facilitarnos la vida, Angular Material viene con varios themes predefinidos que se pueden consultar en la carpeta node_modules/@angular/material/core/theming/prebuilt de nuestro proyecto. En este caso utilizaremos el theme llamado indigo-pink.

Para ello, añadiremos la siguiente línea en el archivo styles.scss.

¡Listo! Ya tenemos los componentes de Angular Material con colores.

Material Design con prebuilt theme

¿Pero qué pasa si queremos personalizar nuestra aplicación con colores propios de nuestra marca? Para ello tenemos la posibilidad de especificar un theme propio con nuestros colores.

Personalizar temas de estilo

Angular Material nos da la posibilidad de personalizar el theme que vamos a utilizar, pero antes de empezar a tocar cosas conviene tener bien claro todos los componentes de un theme.

HUE/Tono: Es un color de una paleta de colores.

Paleta: Una paleta es una colección de colores. Por defecto Angular Material viene con varias paletas prediseñadas.

Color intentionUn color intention es una selección de colores de una paleta para un propósito dentro de la aplicación. Angular Material utiliza tres color intentions:

  • Primary: especifica el color que tendrán los elementos principales de la aplicación.
  • Accent: especifica el color que tendrán los elementos secundarios de la aplicación.
  • Warn: especifica el color que tendrán los elementos que necesiten la atención del usuario.

Theme: Es el conjunto de cinco color intentions; los tres mencionados en el punto anterior, uno para especificar el color de la fuente e iconos y otro para especificar el color del fondo.

Por lo tanto, si queremos un theme personalizado, tenemos que seleccionar los tonos que queremos utilizar y crear las paletas que se utilizarán en la creación de los color intentions. En nuestro caso, crearemos tres paletas, una negra, una gris y otra roja.

Ahora que tenemos nuestras paletas definidas, tenemos que hacer lo siguiente:

  1. Importamos el core de temas.
  2. Importamos nuestras paletas:
  3. Incluimos el mat-core :
  4. Creamos las tres paletas que utliza Material; primary, accent y warn:
  5. A partir de esas paletas, crearemos en este caso un tema claro.
  6. Y por último, incluiremos el theme que acabamos de crear:

Guardamos el archivo y veremos que efectivamente han cambiado los colores de nuestra web.

Material Design con custom theme

¡Con esto ya tenemos todo lo necesario para empezar a desarrollar nuestras apps con Material Design! En el siguiente post crearemos nuestros primeros componentes y servicios de Angular para poder empezar a desarrollar en serio. ¡Hasta el siguiente post!



¿Te gusta este post? Es solo un ejemplo de cómo podemos ayudar a tu empresa...
Sobre Mikel Eizagirre

Desarrollador front-end y de apps móviles.

Queremos tu opinión :)