Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Grid system
Veamos cómo usar el sistema de grillas que nos ofrece Vuetify, a través de sus componentes v-row y v-col.
Cambio de colores y distribución de cards
Hemos cambiado un poco los colores, sin embargo, la distribución de nuestras cards no es buena.
Para hacer esta distribución podemos guiarnos de algunos ejemplos que nos proporciona Vuetify.
Ejemplos en Vuetify
Para esto nos vamos a la sección de Getting Started y nos dirigimos a Wireframes.
Aquí Vuetify nos da algunos ejemplos de cómo podemos distribuir nuestros elementos.
Voy a abrir, por ejemplo, el ejemplo llamado extended toolbar, y el resultado es este:
- Se cuenta con un menú en la parte superior.
- En la parte inferior tenemos cards distribuidos de manera uniforme.
- Hay más ejemplos, por ejemplo, constrained, que se ve de esta manera.
Por ahora vamos a ignorar el layout general y enfocarnos en la parte del centro.
Queremos replicar esto.
Accediendo al código en GitHub
Para esto le damos clic al botón de GitHub y vemos el código de ejemplo que se está usando.
Aquí hay:
- Un componente llamado
main. - Un componente llamado
container. - Dentro de
containerhay un componenterow. - Dentro del
v-rowtenemos unv-col.
Funcionamiento del sistema de grillas
Esto funciona de manera similar a Bootstrap:
- Se asume que existen 12 columnas en el sistema de grillas.
- Podemos definir cuántas columnas ocupará cada elemento.
En este caso:
- Se usa el elemento
v-col, repetido 24 veces (porque hay 24 tarjetas). - Cada
v-colocupa 4 columnas. - Como hay 12 columnas imaginarias, y cada card ocupa 4, se generan 3 espacios.
Ajustando el código
No vamos a usar product card, porque este es solo una carta.
Vamos a ir al elemento padre: product list, que contiene los cards.
Pasos:
- Crear un
v-row, ya que este contiene losv-col. - Insertar
product carddentro dev-col. - Si dejamos un solo
v-col, contendrá todos losproduct card. - Queremos que los
v-colse creen según la cantidad de productos. - Agregamos
v-forenv-colpara iterar dinámicamente. - Usamos el mismo valor de 4 columnas por card.
Como hay 12 columnas en total, esto generará 3 cards por fila.
Ajustando la cantidad de cards por fila:
- 2 cards por fila → Ocupar 6 columnas cada uno.
- 4 cards por fila → Ocupar 3 columnas cada uno.
Así podemos distribuir los elementos según necesidad.
Eliminando elementos innecesarios
Ya podemos eliminar la etiqueta <hr>, que generaba una línea horizontal.
Así obtenemos el diseño final.
Recomendación
Te recomiendo experimentar con v-row y v-col para familiarizarte con estos componentes.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hemos cambiado un poco los colores, sin embargo la distribución de nuestras cards no es buena. Para hacer esta distribución podemos guiarnos de algunos ejemplos que nos proporciona Vuetify. Para esto nos vamos a la sección de Getting Started. Nos dirigimos a Wireframes. Aquí Vuetify nos da algunos ejemplos de cómo podemos distribuir nuestros elementos. Voy a abrir por ejemplo, este ejemplo, que se llama extended toolbar, y el resultado es este. Se cuenta con un menú en la parte superior, y en la parte inferior tenemos cards, que están distribuidos de manera uniforme, y tenemos más ejemplos. Por ejemplo constrained se ve de esta manera, ¿sí? Por ahora vamos a ignorar el layout general, o sea la distribución general, y vamos a enfocarnos simplemente en la parte del centro. Queremos replicar esto. Para esto le damos clic a este botón de GitHub, y vamos a ver el código de ejemplo que se está usando. Aquí hay un componente llamado main, y luego hay un componente llamado container. Dentro del componente llamado container hay un componente llamado row, y dentro de este v-row tenemos un v-column un componente llamado V guión column. ¿De qué manera funciona esto? Esto funciona de una manera muy similar que Bootstrap. Es decir se asume que existen 12 columnas en el sistema de grillas. Existen 12 columnas. Y luego nosotros podemos decir cuántas columnas queremos que ocupe cada elemento. Entonces en este caso se está usando este elemento v-col, y se está repitiendo 24 veces, porque hay 24 tarjetas. ¿Sí? Si contamos vamos a ver qué son 24 tarjetas. Y luego se está diciendo que se quiere ocupar 4 columnas. Dijimos que en total son 12 columnas imaginarias. Como hay 12, y decimos que queremos ocupar 4 cada vez, se está terminan creando tres espacios, ¿sí? En este caso no vamos a usar product card porque product card es solo una carta. Vamos a ir al elemento padre, product list. Este product list sí que contiene a los cards. En este caso lo que vamos a hacer es crear un v-row primero, porque un Vue row es el que contiene a los v-col, y luego vamos a poner este product card dentro de este etiqueta v-col, de esta manera. Si hacemos esto un solo v-col, va a contener a todos los product card. Nosotros queremos que los v-col se creen según la cantidad de productos. Por lo tanto vamos a poner el for aquí, a este nivel. Y vamos a indicar cuántas columnas nos interesa. Vamos a usar también el mismo valor de 4, ¿sí? Queremos que las columnas se usen de 4 en 4. Como son 2 en total, eso va a causar que tengamos tres cards, de esta manera. Llegados a este punto ya podemos eliminar el HR. Ya podemos eliminar este etiqueta HR que habíamos agregado anteriormente, ¿sí? Eliminamos la etiqueta HR que es la que causaba una línea horizontal y tenemos esto, tenemos tres cards ¿Qué pasa si quieres tener dos cards por fila? En ese caso dirás que quieres ocupar de seis en seis, y tendrás este resultado. Si quieres tener más elementos, quieres tener cuatro elementos, dirás que quieres ocupar las columnas de tres en tres, porque son 12 imaginarias. Aquí está, ¿sí? Aquí hay espacio para poner una tarjeta más. Entonces esto dependerá de cómo quieres distribuir tus elementos. Te recomiendo jugar con este VRow y con VCol para que te familiarices con estos componentes
¿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