¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

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.

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























































55

Vuetify: Container





































































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: