Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo aplicar un contenedor de forma general para todas nuestras vistas, no sólo HomeView.
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.
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.
ProductList
y los TypesPor 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
.
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.
¿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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
55
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.