¡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: Active Category Item

Veamos cómo marcar como "active" al list item correspondiente a la ruta que está visitando el usuario. Esto con la intención de resaltar la categoría escogida.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Actualmente nuestro toolBar ya determina correctamente qué botón queremos que esté activo. Sin embargo, eso falta aplicar para nuestras categorías de lado izquierdo. Entonces nos dirigimos a “CategoryList” y vamos a agregar un elemento "active" a nuestro list. Item. Primero, sólo para hacer una prueba. Si le ponemos “active=true” a nuestro list item que dice “todas” vemos que se termina pintando. Entonces este atributo nos funciona correctamente y recibe un valor booleano para determinar si queremos que se pinte o no. Entonces aquí vamos a poner nuestra condición. Si la ruta actual tiene como nombre “home”, vamos a hacer que la opción “todas” se pinte. Entonces, aquí estamos. Vamos a “oficina”, no se pinta. Vamos a “computadora”, no se pinta. Nos vamos a “todas”. Si se pinta. Hasta aquí vamos bien. Nos falta aplicar lo mismo para las dos categorías de la parte inferior. ¿Cuál sería la condición para este “list-Item”? Primero ponemos “active=”, y aquí tenemos que escribir la condición. Si ponemos “rute.name=category”, funcionará, pero pintará a ambas rutas. Por ejemplo, si nos vamos a “oficina” se pinta tanto "oficina" como "computadora" y si nos vamos a “computadora”, también se pinta "oficina" porque ambos representan a la ruta con nombre "category". La diferencia está en el parámetro de ruta. Por lo tanto, aquí vamos a agregar una condición desde esta ruta vamos a acceder a sus parámetros y vamos a acceder específicamente al "categoryId". Si la ruta en la que nos encontramos tiene un “categoryId”, que es igual a la “categoryId”, en ese caso queremos que se pinte. Sin embargo, aquí nos resalta esto porque nos dice que esto va a ser una cadena. Lo que vamos a hacer, entonces, es convertir esto a “number” y entonces la comparación será posible. Guardamos y aquí tenemos solo resaltado la opción que dice "computadora". Aquí solo la opción que dice "oficina". Y aquí sólo la opción que dice “todas”.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

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

Capítulos

































































































97

VList: Active Category Item



























Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: