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 hacer uso del componente v-container para corregir el espacio alrededor de nuestro contenido. También agregamos un card para nuestro carrito.
Hasta aquí todo bien, sin embargo, nuestros cards siguen pegados a los bordes de la página. ¿Cómo podemos mejorar esto?
Para mejorar esta situación, vamos a los wireframes y abrimos nuevamente el ejemplo que estábamos viendo de extended toolbar.
Nosotros estuvimos viendo el código de este wireframe y nos encontramos con que el v-row
se encuentra dentro de una etiqueta v-container
, y esta a su vez se encuentra dentro de una etiqueta v-main
.
Si buscamos aquí, veremos que existe algo llamado v-container
. Específicamente, podemos revisar la sección de grid system o sistema de grillas, para comprender mejor cómo funciona.
v-container
Aquí nos dice que v-container
nos permite centrar el contenido de nuestro sitio y que también podemos usar la propiedad fluid
si queremos extender su ancho.
Entonces, vamos a volver a nuestro componente ProductList y vamos a encerrar nuestro v-row
, y también nuestro carrito, dentro de una etiqueta v-container
.
Dentro, pondremos lo que ya hemos tenido.
Con esto, conseguiremos dar cierto espaciado a nuestro contenido, porque el container
está preparado para hacer ello.
Guardamos y, al volver al navegador, nos encontramos con esto: los cards ya se muestran correctamente.
No sucede lo mismo con el carrito de compras, pero no hay problema, porque esta información probablemente la vamos a estar mostrando en otra página.
De todas formas, podemos empezar a darle un poco de estilos también a esto. Lo más básico será ir a nuestro componente Card y hacer uso de v-card
.
Vamos a poner nuestro contenido dentro de un v-card-text
.
Guardamos y, de momento, tenemos este resultado.
Como vemos, nuestra tarjeta está totalmente pegada a los cards de arriba.
Para solucionar esto, hemos visto que podemos usar márgenes.
En este caso, vamos a usar un margin-top
y vamos a ponerle un espaciado de 4
. ¡Allí está!
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hasta aquí todo bien, sin embargo nuestros cards siguen pegados a los bordes de la página. ¿Cómo podemos mejorar esto? Para mejorar esta situación vamos a los wireframes, y vamos a abrir nuevamente el ejemplo que estábamos viendo de extended toolbar. Nosotros estuvimos viendo el código de este wireframem y nos encontramos con que el Vue row se encuentra dentro de una etiqueta Vue container, y esta su vez se encuentra dentro de una etiqueta v-main. Si nosotros buscamos aquí vamos a ver que existe algo llamado v-container. Específicamente podemos revisar la sección de grid system, o sistema de grillas, para comprender mejor cómo funciona. Aquí nos dice que Vue container nos permite centrar el contenido de nuestro sitio, y que también podemos usar la propiedad fluid si queremos extender su ancho. Entonces nosotros vamos a volver a nuestro componente product list y vamos a encerrar nuestro v-row, y también nuestro carrito, dentro de una etiqueta Vue container. Dentro, vamos a poner lo que ya hemos tenido. Con esto vamos a conseguir dar cierto espaciado a nuestro contenido, porque el container está preparado para hacer ello. Guardamos y al volver al navegador nos encontramos con esto. Los cards ya se muestran correctamente. No sucede lo mismo con el carrito de compras pero no hay problema porque esta información probablemente la vamos a estar mostrando en otra página. De todas formas podemos empezar a darle ya un poco de estilos también a esto. Lo más básico será ir a nuestro componente card, y hacer uso de Vue card. Vamos a poner nuestro contenido dentro de un Vue card text. Guardamos y de momento tenemos este resultado. Como vemos nuestra tarjeta está totalmente pegada a los cards de arriba. Para solucionar esto hemos visto que podemos usar márgenes. En este caso vamos a usar un margin top y vamos a ponerle un espaciado de 4. Allí está.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
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 😉.