¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

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 pregunta

¡Comparte conocimiento!

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 llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: