Container

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

Crea una cuenta y continúa aprendiendo 🚀

Container