Crea una cuenta y continúa aprendiendo 🚀

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

Frontend Aprendiz

Container

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.

Mejorando el Espaciado de los Cards

Hasta aquí todo bien, sin embargo, nuestros cards siguen pegados a los bordes de la página. ¿Cómo podemos mejorar esto?

Revisando los Wireframes

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.

Función de `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 Revisamos en el Navegador

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.

Aplicando Estilos

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á.