es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Es posible pasar la propiedad isActive a sus hijos en NavLink?

29 Jul, 2023 Programación

Estoy utilizando el componente en mi barra de navegación. Tengo un ícono de corazón dentro del componente y quiero que se llene cuando esté en estado activo y que solo muestre el trazo cuando esté inactivo. Estoy utilizando Tailwind CSS y heroicons. ¿Es posible pasar la propiedad isActive de a su hijo, en este caso el ícono?

Aquí tienes el fragmento de código de referencia.

<navlink to="favorite" classname="{({isActive})" ==""> `text-red-400 ${isActive ? "" : ""}`}
>
    <svg xmlns="http://www.w3.org/2000/svg" classname="w-6 h-6" ${parentproperty?="" "fill-current"="" :="" ""}="" fill="none" viewbox="0 0 24 24" stroke="currentColor">
        <path strokelinecap="round" strokelinejoin="round" strokewidth="{2}" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
    </svg>
</navlink>

Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible pasar la propiedad isActive de NavLink a su elemento hijo. Puedes usar la propiedad isActive para agregar condicionalmente la clase fill-current al elemento svg para rellenarlo cuando el enlace esté activo y eliminarlo cuando esté inactivo.

    Aquí tienes el fragmento de código actualizado:

    <navlink to="favorite" classname="{({isActive})" ==""> "text-red-400" + (isActive ? " fill-current" : "")}
>
  <svg xmlns="http://www.w3.org/2000/svg" classname="w-6 h-6" viewbox="0 0 24 24" stroke="currentColor">
    <path strokelinecap="round" strokelinejoin="round" strokewidth="{2}" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
  </svg>
</navlink>

    En el código actualizado, la clase fill-current se agrega o elimina en base a la propiedad isActive, lo que rellena el ícono del corazón cuando el enlace está activo y muestra solo el contorno cuando está inactivo.

Comments are closed.