jairogarcíarincón
01/05/2024
Contenidos
Introducción
En este componente mostraremos la información de cada casa, a la que se accederá mediante los enlaces de la página principal.
Es importante tener en cuenta que, dado que el objetivo del curso es el diseño responsive, no se realizan comprobaciones en cuanto a la validez de los enlaces ni de sus parámetros, se presupone que siempre son correctos.
Todos los ficheros a modificar se encuentran dentro de la ruta /src/app/casa.
El fichero casa.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, del cual filtraremos la casa seleccionada para que la vista la tenga disponible.
Modifica el fichero para que incluya el siguiente contenido y fíjate en los comentarios para entender bien su funcionamiento:
11-casa.component.ts
El fichero casa.component.html
En este fichero mostraremos el contenido del componente, mostrando los datos en forma de tarjeta.
Modifica el fichero para que incluya el siguiente contenido:
12-casa.component.html
El fichero casa.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:
13-casa.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, en una casa concreta:
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia
Referencias
Card component
Common routing tasks
Publicado el 18 de Febrero de 2025
angular angular material material sass diseño responsive