13.1 - AngularMaterial
Por lo tanto seria como unAngularMaterialSeed
ng new probando-material
npm install --save @angular/material
npm install --save hammerjs
npm install --save-dev @types/hammerjs
Ahora si, tenemos las dependencias que necesitamos por lo tanto vamos a empezar a probar todo en el componente principal … Si, claro, vamos a probar lo que nos trae material y ponerlo todo en un solo componente, para que puedan ver que trae cada cosa y como utilizarla :D !
Arrancamos a codear
Lo primero que vamos a hacer, ahora que ya tenemos la dependencia, vamos a agregar el modulo
Ahora si, una vez importado el modulo y con la referencia de hammer y icon de material, el beneficio que tenemos con el autocomplete es que ya nos van a aparecer los componentes de material.
Uno de los grandes principios de material design, son las “cards”, estos componentes lo que tienen es la idea de centralizar todo el contenido que queremos mostrar sobre eso… por ejemplo, mostrar un titulo con contenido… pensemos que es un div con formato mas fijo…
CheckBox
Como todo lo parece es bastante fácil de aprender… la verdad que seria todo mas que nada un copy and paste… pero vamos a la realidad…
Que es lo que necesitamos entender para poder trabajar mejor con AngularMaterial =>
Cada uno de los nuevos tags que ponemos es un componente… por lo tanto seguimos con la vida de componentes creada por angular… Algunos de estos componentes tienen inputs y outputs y los vamos a tener que utilizar… tal y como esta en el ejemplo de arriba… md-checkbox tiene de entrada checked align disable… y esto los podemos manejar obviamente desde nuestro componente…
Sigamos un poco con el tema de los componentes…
En el seed van a ver que hay algunos importados… pero creo que una parte muy importante es entender la grilla que se creo para esto… ya que es un componente del tipo Grid List
Como funciona
Este grid en este caso es dinámico … y cada uno de los inputs se referencia al titles que esta creado… como queda =>
Para entender un poco mejor … pongamos el código como si no iterara..
enmd-grid-listvamos a indicar la cantidad de columnas y el height de cada row …
enmd-grid-tile , nuestro iterado, vamos a poner la cantidad de columnas y filas que va a ocupar el nuestro “div” y luego simplemente le damos un color y ponemos texto adentro… mas allá del texto podríamos poner cualquier cosa ahi adentro.. como una card por ejemplo…
Y por ultimo vamos a ver como armar una card simple… para ver el funcionamiento de las mismas…
Exactamente tenemos una seria de componentes que generan la card… pero es bastante simple como pueden ver… un contenedor, un header , una imagen, el contenido y por ultimo los botones tal y como los queremos… y gracias al theme que pusimos queda todo de un color adecuado..
Por lo tanto utilizar AngularMaterial es super facil de usar… simplemente hay que sentarse a mirar como funciona los componentes o copiar y pegar para arrancar a utilizarlos y cambiar el contenido.. al estar dentro de angular como componentes podemos utilizar los inputs para poder darle mas funcionalidad … y esto nos genera tener algo completo…
Para los developers (como yo) que no son muy buenos con el tema del diseño o la combinación de colores, con esto vamos a olvidarnos… y tampoco nos tenemos que poner a agregar cosas de terceros que podrían hacer perder tiempo… simplemente importamos y empezamos a utilizar…
El ejemplo de todo esto esta en : https://github.com/jorgeucano/probando-angular-material
Last updated
