Introducción
Con esta lección, comenzaremos el diseño de la página de la interfaz del chat, denominada «chat bot page», que creamos en la lección anterior y a la que se accede al hacer clic en la imagen de un personaje.
La estructura principal de esta página se dividirá en tres secciones: un encabezado, un cuerpo central y un cuerpo inferior. Cada sección será un componente contenedor que incluirá los elementos necesarios para el diseño final.
Primeramente, veremos la configuración previa de la propia página y después nos centraremos en el diseño del encabezado de la página
Configuración inicial de la página
Antes de agregar componentes de vista a la página, vamos a configurarla. Al igual que hicimos con la página PERSONAS, en el menú de configuración del lado derecho, en la pestaña STYLE, estableceremos el padding en cero y marcaremos las tres opciones del menú ADVANCED: Stretch to the viewport, Disable scrolling y Disable safe area.
Esto desactivará el desplazamiento dentro de la aplicación y hará que el contenido de la página se ajuste a todo el espacio disponible en la pantalla del dispositivo.
Para seguir con esta lección debes iniciar sesión.
El contenido de esta lección está restringido para suscriptores PREMIUM
¡Acceso a todo el contenido!
Al igual que en la página PERSONAS, desactivamos el menú de navegación preestablecido.
Container Title o Encabezado
Nos enfocaremos en el primer componente que utilizaremos en esta página: un contenedor tipo CONTAINER que llamaremos «Container Title». Este contenedor nos servirá para crear el encabezado de la página, donde se incluirán tanto el texto o nombre del bot que hemos seleccionado como su imagen correspondiente. Para lograr esto, el contenedor «Container Title» albergará a su vez otros componentes que contendrán el título y la imagen del bot.
La estructura del diseño del encabezado está reflejada en el siguiente diagrama:
En la próxima lección seguiremos con el diseño del cuerpo central de la página chat bot.
