jairogarcíarincón
01/05/2024
Contenidos
Introducción
En este apartado configuraremos el componente encargado de mostrar el contenido de la página principal o home.
Este contenido consistirá en un listado de tarjetas distribuídas en una parrilla o grid con el contenido básico de cada casa, esto es, titulo, imagen, entradilla y fecha, así como un enlace a la casa correspondiente.
Todos los ficheros a modificar se encuentran dentro de la ruta /src/app/home.
El fichero home.component.ts
Este fichero será el encargado de importar todos los componentes necesarios para conseguir nuestro objetivo, incluyendo el archivo JSON con los datos de cada casa, de modo que la vista lo tenga disponibles.
Además, de manera similar a como hicimos en AppComponent, obtendrá el valor de la variable tabletQuery, que nos permitirá adaptar el contenido de la vista en función del anchod e la pantalla.
Modifica el fichero para que incluya el siguiente contenido y fíjate en los comentarios para entender bien su funcionamiento:
08-home.component.ts
El fichero home.component.html
En este fichero mostraremos el contenido del componente, recorriendo todas las casas y mostrando los datos en forma de grid de tarjetas.
Modifica el fichero para que incluya el siguiente contenido:
09-home.component.html
El fichero home.component.scss
Por último, para dar estilo al contenido anterior, en este fichero añadiremos las clases necesarias para asegurarnos un diseño responsive y con modos claro y oscuro:
Modifica el fichero para que incluya el siguiente contenido, prestando atención a los comentarios:
10-home.component.scss
Las siguientes cuatro imágenes muestran cómo debería quedar el contenido en escritorios y móviles, para los modos claro y oscuro:
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia
Referencias
Grid list component
Card component
Layout overview
Publicado el 21 de Noviembre de 2024
angular angular material material sass diseño responsive