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
VList: Subheader
Veamos cómo organizar nuestros items del menú izquierdo usando encabezados.
Mejorando la claridad del menú en Vuetify
A pesar de que el menú ya funciona, no está del todo claro porque en ningún momento se indica que estas opciones son categorías.
Vamos a agregar subtítulos:
- Categorías
- Filtros o Orden
Revisando la documentación de Vuetify
Para esto, consultamos la documentación de Vuetify y revisamos el componente Vue Lists.
El componente v.list soporta el concepto de grupos. Podemos definir grupos para nuestro v.list y así conseguir que ciertos items tengan un encabezado dentro de la etiqueta v.list.
Agregando encabezados
Podemos incluir un elemento v-list-subheader para situar un encabezado al mismo nivel que los items.
En nuestro caso:
- Antes de la opción “todas las categorías”, agregamos un
v-list-subheadercon el texto Categorías. - Luego del
divider, justo antes de “order by price”, agregamos otrov-list-subheadercon el texto Orden.
Mejorando la opción de ordenamiento
Cambiaremos el texto del encabezado de orden.
Además de permitir ordenar por precio, agregaremos la opción de ordenar por nombre.
Resultado final
Después de guardar los cambios:
- Se muestra Categorías antes de la lista de categorías.
- Se muestra Orden antes de las opciones de ordenamiento.
- Ahora es posible ordenar tanto por precio como por nombre.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
A pesar que aquí ya nos funciona, el menú no está del todo claro, porque en ningún momento se indica que estas opciones son categorías. Entonces vamos a poner aquí un subtítulo que diga “categorías” y aquí otro que diga “filtros” o bien “orden”. Para esto nos dirigimos a la documentación de Vuetify y revisamos el componente Vue Lists. El componente “v.list” soporta un concepto de grupos. Nosotros podemos definir grupos para nuestro “v.list” y de esta manera conseguir que ciertos "items" tengan un encabezado dentro de nuestra etiqueta “v.list”. Nosotros podemos agregar un elemento “v-list-subheader” y de esta manera conseguir situar un encabezado al mismo nivel que los "items". Entonces, en nuestro caso, antes de la opción “todas las categorías” vamos a poner un "v.list-subheader" con el texto categorías y luego de el “divider” justo antes de “order by price”, vamos a poner otro "subheader" con el texto "orden" y aquí vamos a cambiarle el texto. Vamos a permitir ordenar por precio, pero también por nombre. Luego de guardar los cambios, tenemos este resultado categorías y aquí tenemos un "orden" que podemos aplicar.
¿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
98
VList: Subheader
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript