Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
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.
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