Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Esta lección está disponible únicamente para suscriptores.
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.
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
06
08
09
30
35
38
44
48
49
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 llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: