jairogarcíarincón

Introducción

En este componente mostraremos un formulario de contacto, al que se accederá desde los enlaces de los menús de navegación.

Dicho formulario lo creamos en el apartado de Configuración a partir de un Schematics de Angular, y en este apartado tan solo vamos a personalizar y dar estilo a los distintos campos, así como asegurarnos el diseño responsive correcto, ya que no le añadiremos funcionalidad alguna.

Todos los ficheros a modificar se encuentran dentro de la ruta /src/app/contacto.

El fichero contacto.component.ts

Este fichero será el encargado de importar todos los componentes necesarios para conseguir nuestro objetivo. Respecto al original, tan solo se ha modificado apra adaptar y traducir los nombres de los campos y para sustituir el contenido con estados de USA por provincias de España.

Modifica el fichero para que incluya el siguiente contenido y fíjate en los comentarios para entender bien su funcionamiento:

14-contacto.component.ts

El fichero contacto.component.html

En este fichero se muestra el contenido del formulario. de nuevo, solos e ha modificado apra adaptar y traducir los nombres, así como para añadir un título al principio y un botón de volver al final.

Modifica el fichero para que corresponda al siguiente contenido:

15-contacto.component.html

El fichero contacto.component.scss

Por último, para dar estilo al contenido anterior, en este fichero modificaremos las clases existentes y añadiremos las 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:

16-contacto.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, de la página de contacto:

Referencias

Schematics

---

Publicado el 28 de Enero de 2025

angular angular material material sass diseño responsive