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:

  1. Antes de la opción “todas las categorías”, agregamos un v-list-subheader con el texto Categorías.
  2. Luego del divider, justo antes de “order by price”, agregamos otro v-list-subheader con 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 pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos


































































































98

VList: Subheader


























Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.