Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Vuetify: Container

Veamos cómo aplicar un contenedor de forma general para todas nuestras vistas, no sólo HomeView.

Ajustes en el Layout de la Página

Nuestro layout se ve bien para nuestra página de inicio, pero para las otras dos páginas no hay siquiera un espaciado con respecto al borde de la página.

Esto se debe a que el template de estos componentes no tiene ningún margen ni padding.

Vamos entonces a solucionar esto.

Problema con el Espaciado

Lo que pasa actualmente es que nuestro RouterView está invocando a la vista home, y la vista home tampoco tiene ningún padding ni margen, pero este sí que lo tiene.

Problema con `ProductList` y los Types

Por cierto, este ProductList no está pudiendo acceder a los types.

Para corregir esto, vamos a escribir model/types.

Sí, porque ahora los types se encuentran dentro de la carpeta model.

Aplicación del `v.container`

Bien, lo que estamos viendo acá es que nuestro ProductList está encerrado dentro de un v.container.

Este v.container es el que proporciona los márgenes para que los cards tengan cierto espaciado.

Como nosotros queremos que este v.container afecte a todos, no solamente a ProductList, vamos a eliminar este v.container de aquí y aplicarlo para todas nuestras vistas.

Solución Global

¿Cómo podemos hacer ello?

Podemos agregar el v.container en este nivel y aplicarlo a cualquier contenido que presente este RouterView.

Entonces guardamos.

Como vemos, home presenta un espaciado, pero cart también y about también.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Nuestro layout se ve bien para nuestra página de inicio, pero para las otras dos páginas no hay si quiera un espaciado con respecto al borde de la página. Esto se debe a que el template de estos componentes no tiene ningún margen ni padding. Vamos entonces a solucionar esto. Lo que pasa actualmente es que nuestro "RouterView" está invocando a la vista "home" Y la vista "home" tampoco tiene ningún padding ni margen, pero este sí que lo tiene. Por cierto, este "ProductList" no está pudiendo acceder a los types. Aquí para corregir esto, vamos a escribir "model/types". Sí, porque ahora los types se encuentran dentro de la carpeta "model". Bien, lo que estamos viendo acá es que nuestro "ProductList" está encerrado dentro de un "v.container". Este "v.container" es el que proporcionan los márgenes para que los cards tengan cierto espaciado. Como nosotros queremos que este "v.container" afecte a todos, no solamente a "ProductsList". Vamos a eliminar este "v.container" de aquí y vamos a aplicarlo para todas nuestras vistas. ¿Cómo podemos hacer ello? Pues podemos agregar el "v.container" en este nivel y aplicarlo a cualquier contenido que presente este "RouterView". Entonces guardamos. Como vemos, "home" presenta un espaciado, pero "cart" también y "about" también.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code