Es hora de continuar con nuestro próximo ejercicio en el que examinaremos los componentes una vez más.
Modificaremos la plantilla para
el componente de menú que ya hemos incluido en nuestra aplicación Angular
mediante el uso de un nuevo tipo de componente de material para diseñar nuestro menú de una manera diferente.
En el camino, también veremos el uso de la directiva estructural nGiF.
Al ir al archivo de plantilla de nuestro componente de menú,
voy a hacer algunos cambios en este archivo de plantilla.
Primero, voy a agregar otro div aquí
con FXFlex y luego cerrar ese div allí.
Entonces, observe que ahora dentro de mi div externo,
tengo dos divs aquí.
Entonces, uno con el div y el segundo con la lista vacía.
Por lo tanto, estas son dos piezas de contenido que deben colocarse en la pantalla.
Pero tenga en cuenta que he especificado el FXLayout para coloreado.
Entonces, lo que significa que, estas dos piezas de contenido
se colocarán una encima de la otra,
apiladas una encima de la otra.
Entonces, en el primer div,
voy a incluir un poco de contenido aquí.
Entonces, pondré otro div dentro aquí.
Más tarde, agregaré más a este div.
Pero por el momento, solo tendré un h3 con el elemento de menú allí,
y luego agregaré un elemento de línea horizontal a este menú.
Entonces, esto le dará el título de
esta página en particular justo en la parte superior de mi aplicación cuando se renderiza.
Entonces, esa es una modificación.
Ahora, para la segunda parte,
en lugar de usar el mat-list-item,
Voy a tomar ahora la ayuda de una mat-grid-list.
Mat-Grid-list me permite diseñar el contenido como
una cuadrícula de elementos en lugar de una lista de elementos.
Vimos cómo se presentó el menú con la lista de elementos en el ejercicio anterior.
Ahora, me gustaría diseñar el mismo menú de una manera diferente un
un poco más atractivo para el menú.
Entonces, en lugar de usar la lista de matas,
voy a cambiar esto de lista de mat-list a una lista de mat-grid-list.
Entonces, antes de hacer eso,
también incluiré esto dentro de otro div al que aplicaré el FXFlex aquí,
para que la lista de rejilla mate esté en su propia allí.
Entonces, eso me dará más flexibilidad para agregar elementos
a esta unidad en particular si necesito más adelante.
La lista de cuadrículas ahora toma un parámetro llamado como columnas
que especifica cuántas columnas debe contener esta cuadrícula.
Ahora mismo especificaré las columnas como dos porque solo tengo cuatro elementos en mi menú.
Entonces, dos columnas son suficientes.
Entonces, al menos tengo dos filas de la cuadrícula allí.
Además, esto toma otro parámetro llamado
como RowHeight o un atributo llamado como RowHeight,
que especificaré como 200 píxeles aquí.
Entonces, eso completaría la lista de rejilla de mat-que tengo dentro del div allí.
Ahora, una vez que haga el cambio, luego dentro de esto,
entraré y usaré,
en lugar del mat-list-item,
esto ahora va a ser un mat-grid-tile aquí.
Entonces, el mosaico de cuadrícula.
Básicamente, azulejos de la cuadrícula.
Este azulejo de rejilla, como te das cuenta,
voy a estar iterando sobre la lista de platos.
Entonces, todavía estoy usando mi directiva ngFor con ella.
Este azulejo de rejilla mate-rejilla ahora encierra
el contenido que se va a colocar en cada ficha de mi cuadrícula aquí.
Ahora, dentro de la ficha,
voy a usar la imagen tal como existe.
Pero voy a usar la imagen,
no con MatListAvatar porque eso no se puede aplicar aquí, y en su lugar,
especificaré la altura de la imagen como 200 píxeles.
Entonces, esto coincide con la altura de la fila para que mi imagen estire
toda la altura de mi mosaico allí.
Por lo tanto, la altura de la imagen, 200 píxeles,
y la fuente y la alt permanecerán como tal.
Entonces, la siguiente parte,
en lugar de la h1,
voy a cambiar este
para ser
encerrado dentro de mat-grid-teille-pie de página.
Por lo tanto, cualquier contenido que esté dentro de aquí aparecerá dentro del pie de piso de azulejos de la rejilla de la estera aquí.
Ahora, dentro de allí puedo especificar el contenido que quiera.
Entonces, para el mosaico de cuadrícula,
dada la descripción completa es un poco demasiado.
Entonces, voy a eliminar esta descripción,
y en su lugar, solo usar el h1 allí.
Ahora, además, voy a tomar la ayuda de una tubería angular aquí.
La tubería que voy a aplicar a esto, como pueden ver,
la tubería es la barra vertical en su teclado.
Entonces, usaré la tubería en mayúsculas.
Entonces, ¿qué hace esta tubería?
Este tubo, el tubo en mayúsculas transformará el nombre del plato de
lo que sea en una palabra completa con letras mayúsculas.
Entonces, cualquiera que sea el nombre del plato se representaría como
letras completamente mayúsculas cuando se representa en la plantilla allí.
Entonces, ese es el uso de una tubería angular aquí.
Por lo tanto, vamos a utilizar más tubos angulares a medida que avanzamos.
Este es nuestro primer encuentro con uno de los tubos angulares incorporados en este curso.
Entonces, con esto, ahora hemos modificado nuestro diseño
para mostrar este div aquí y luego esta lista de cuadrícula aquí.
Guardemos los cambios.
Pasando ahora al archivo app.module.ts,
necesitamos importar el MatGridListModule allí.
Así que, yendo a la parte superior allí, diremos,
«Importar MatGridListModule desde angular/material/grid/list.»
Una vez que hayamos agregado esto,
entonces bajaremos a las importaciones en el decorador,
y luego incluiremos el MatGridListModule en las entradas.
Vamos, de nuevo, a guardar los cambios.
Vamos a echar un vistazo rápido a nuestra página web y cómo se ve en la pantalla.
Al ir a nuestra página web,
ya puedes ver que tu menú está ahora dispuesto de una manera diferente.
Aunque, no es realmente tan grande mirando en este momento.
No soy diseñador,
así que eso es lo mejor que pude obtener de él.
Ahora, si tuviera 20 elementos en mi menú,
entonces podría diseñar varios elementos en cada fila y varias columnas,
y luego podría comprimir el espacio que ocupa cada elemento,
o puedo aumentar el tamaño de la imagen para que
ocupe todo hasta que se vea mucho más atractivo en la pantalla.
Ahora, echemos un vistazo a esta misma cosa cuando se ve en una pantalla de dispositivos más pequeños.
Por lo tanto, aquí es donde voy a tomar la ayuda de
las opciones de desarrollador en mi navegador Chrome.
Por lo tanto, comenzaré con las herramientas de desarrollo aquí.
Cuando tengo las herramientas de desarrollo aquí,
puedes ver este botón aquí diciendo, «Alternar barra de herramientas del dispositivo».
Entonces, déjame alternar hacia atrás.
Entonces puede ver la misma página siendo renderizada en diferentes tamaños de pantalla.
Así que aquí, se ve la página siendo renderizada en un Galaxy S5,
y luego lo mismo
se puede ver siendo renderizado en modo horizontal.
Entonces, puedes ver que esto me permite ver la misma página
en diferentes tamaños de pantalla usando las herramientas de desarrollador integradas en Android.
Por lo tanto, echemos un vistazo a cómo se ve en un iPhone.
El menú se ve mucho más atractivo aquí.
Esto es lo que me gustaría lograr en la pantalla.
Si mis imágenes fueran mucho más grandes en tamaño incluso en las pantallas de mayor resolución,
el menú se vería así.
En modo paisaje, así es como se verá.
Ahora, toma nota de estas herramientas para desarrolladores en Chrome.
Vamos a usar las herramientas de desarrollador más adelante cuando utilicemos Angular en
más detalle porque podemos examinar cosas como lo que Angular
puede imprimir para nosotros en la consola.
Entonces incluso podemos examinar cómo se están recuperando las diferentes partes de nuestra aplicación.
Podemos ver el rendimiento de la red de nuestra aplicación, y así sucesivamente.
Entonces, ahí es donde esta adición de herramientas de desarrollador es muy,
muy útil para nosotros.
Volviendo a la forma normal,
así es como se ve nuestra página web en un navegador de escritorio estándar.
Aún no hemos terminado.
Volvamos a los componentes del menú.
Archivo mecanografiado y luego este plato que tengo
definido aquí en lugar de mantener esto dentro de mi clase,
voy a mover estos platos en una constante que
definiré allí y lo nombraremos como platos const,
y esto sería del tipo plato una matriz,
y luego yo cortará todo este juego de platos desde aquí y luego lo moverá allí.
Esto está en preparación para un ejercicio futuro en el que vamos
para no incluir este tipo de datos en nuestra aplicación,
sino que en su lugar vamos a trasladar esto a un servicio.
Así que, lo que he hecho es cortar la información de los platos y
luego ponerlo en una constante aquí con el nombre de los platos en todas las capitales aquí,
y luego ahora mis platos se dejan como un huérfano aquí.
Así que, esto voy a hacer que sea igual a los platos aquí.
Ahora, tienes que preguntarte cómo es que he quitado el tipo para los platos.
TypeScript es lo suficientemente inteligente como para darse cuenta de que cuando haces esto,
asignará automáticamente el tipo a los platos para que coincidan con lo que tienes en los platos.
Entonces, incluso si no lo escribe en TypeScript lo hará,
pero si desea ser completamente claro,
puede hacer esto también y eso funcionará igual de bien.
Vale, si lo prefieres, esto lo dejará como tal.
Ahora, además, voy a introducir una variable más aquí llamada SelectedDish.
Esta variable voy a usar en este ejercicio y uno de los ejercicios posteriores también.
Entonces, voy a hacer que esto sea igual al primer plato en mi matriz.
Ahora, este SelectedDish será útil para la siguiente parte de este ejercicio.
Por lo tanto, guardemos los cambios y luego volvamos a nuestra plantilla.
En la plantilla, lo que voy a hacer es justo debajo del menú,
voy a usar un elemento de tarjeta de material angular a
mostrar este SelectedDish justo debajo del menú allí.
Ahora, aunque esta no es la mejor manera de hacerlo,
pero esto estoy haciendo en preparación para el próximo ejercicio sólo para
ilustrar cómo un elemento de tarjeta material puede ser utilizado para nuestra aplicación.
Entonces, voy a usar un div con un flex fx aquí,
y luego a este div voy a agregar
un nGIF con el SelectedDish.
Entonces, tenga en cuenta que estoy aplicando un nGIF a este div aquí para
especificar que si el SelectedDish es actualmente nulo,
entonces no agregaré este div al dom.
Si no es así,
entonces este div se agregará al dom,
y mostrará el elemento de la tarjeta con el contenido en el If.
Entonces, voy a usar un elemento de tarjeta para mostrar los detalles del SelectedDish.
Así que, para hacer eso,
utilizo una tarjeta de estera aquí de la tarjeta de diseños de material aquí.
La mat-card en sí tiene
un encabezado de mat-card parte
y también junto con el mat-card-header,
tendrá un mat-card-content.
Permítanme cerrar ese contenido de la tarjeta de mat-content.
Entonces, en el encabezado, ¿qué quiero mostrar en el encabezado?
En el encabezado, quiero usar
un mat-card-title para mostrar
los detalles del nombre del SelectedDish aquí.
Entonces, entraría y diría h3 y cerraría el h3 y dentro de aquí voy a
usar la interpolación y luego diría
seltedDish name y pipe mayúsculas.
Entonces, tenga en cuenta cómo he incluido el nombre del SelectedDish usando el mat-card-title.
Ahora, además, voy a usar un método,
uno llamado imagen que toma un atributo llamado mat-card-image y
la fuente sería como esperabas,
esto debería ser seleccionadoDisk.Image y
entonces la alternativa voy
a dar como selecteddish.Name.
Por lo tanto, esta sería la imagen que se incluirá en mi tarjeta aquí.
Así que, en el contenido,
voy a incluir selectedDish descripción,
y luego junto con el contenido aquí,
también puedo añadir algunos botones a la parte inferior de la tarjeta.
Entonces, usaré mat-card-actions aquí y dentro de
allí puedo incluir un botón.
Entonces, ves que este es el uso de un botón
en mi aplicación, dos botones.
Observe el uso de este botón de la alfombra aquí.
Entonces, esto convertirá este botón en un diseño de material como el botón aquí,
y así, estos dos botones aparecerán en la parte inferior de mi tarjeta aquí.
Entonces, con esto, he agregado los detalles del SelectedDish.
Hay una razón para que yo haga esto.
Te estoy mostrando cómo puedes mostrar los detalles en una tarjeta,
bueno, esto está en preparación para tu primera asignación.
Por lo tanto, puede ver cómo podemos usar una tarjeta de diseño de material en nuestra plantilla aquí.
Al ir a @module .ts, tenemos que importar la tarjeta y el módulo de botón.
Así que, subiendo a la parte superior diremos importar MatCardModule desde la tarjeta de material angular
y
importar MatButtonModule desde el botón de material angular.
Ahora que hemos añadido estos dos a la parte superior,
vamos al decorador,
y en las importaciones vamos a añadir en MatCardModule y MatPatternModule.
Así que, guardemos los cambios y luego echemos un vistazo rápido a nuestra página web.
Echando un vistazo a nuestra aplicación angular en el navegador,
ahora ves que tenemos el menú que se muestra
aquí y luego en la parte inferior ahora tenemos un elemento de tarjeta.
Por lo tanto, se puede ver el elemento de la tarjeta aquí con el título allí y la imagen allí.
Por supuesto, la imagen se ve horrendo porque es
el tamaño real de la imagen que te he dado es tan
pequeño y se ha expandido para llenar toda la pantalla.
Mira el fondo aquí. Por lo tanto, este
contiene la descripción de la imagen y luego dos botones aquí,
justo abajo aquí.
Entonces, así es como el botón de estera estiliza los botones en una plantilla angular,
para que tengas como y el botón de compartir.
Por supuesto, no están haciendo nada,
pero tenga en cuenta el diseño del material como el comportamiento está allí.
Así que, cuando haces clic en el botón,
puedes ver las ondas pasando.
Entonces, esa es la razón por la que decidí usar
el módulo de material angular para diseñar las plantillas en este curso.
Así que, echándole un vistazo en un dispositivo más pequeño,
se ve mucho más atractivo en un dispositivo más pequeño.
Así, se puede ver que la representación es mucho mejor en un dispositivo más pequeño,
se puede ver que en la pantalla se puede ver
la tarjeta allí mostrando los detalles y los dos botones allí,
similares y el botón de compartir,
y los detalles del plato.
Entonces, eso completa este ejercicio.
Así que, en este ejercicio,
hemos examinado el uso de la lista de cuadrícula y
los componentes de diseño de material de la tarjeta para diseñar la plantilla para nuestro componente de menú.
Este puede ser un buen momento para que usted haga un buen comentario con el mensaje,
Componentes angulares parte dos.