Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
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.
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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
55
Vuetify: Container
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript