wire:current
La directiva wire:current permite detectar y aplicar estilo fácilmente a los enlaces activos en una página.
Este es un ejemplo sencillo de cómo añadir wire:current a los enlaces de una barra de navegación para que el enlace activo en ese momento tenga un peso de fuente mayor:
<nav> <a href="/panel" ... wire:current="font-bold text-zinc-800">Dashboard</a> <a href="/publicaciones" ... wire:current="font-bold text-zinc-800">Publicaciones</a> <a href="/usuarios" ... wire:current="font-bold text-zinc-800">Usuarios</a></nav>Ahora cuando un usuario visite /publicaciones, el enlace “Publicaciones” tendrá un tratamiento de fuente más fuerte que los otros enlaces.
Ten en cuenta que wire:current funciona de forma inmediata con los enlaces wire:navigate y los cambios de página.
Concordancia exacta
Por defecto, wire:current utiliza una estrategia de concordancia parcial, lo que significa que se aplicará si el enlace y la página actual comparten la parte inicial de la ruta de la Url.
Por ejemplo, si el enlace es /publicaciones, y la página actual es /publicaciones/1, se aplicará la directiva wire:current.
Si desea utilizar la concordancia exacta, puede añadir el modificador .exact a la directiva.
A continuación se muestra un ejemplo en el que puede que desee utilizar la concordancia exacta para evitar que se resalte el enlace Panel cuando el usuario visite /publicaciones:
<nav> <a href="/" wire:current.exact="font-bold">Panel</a></nav>Comparación estricta
Por defecto, wire:current elimina las barras finales (/) de su comparación.
Si desea desactivar este comportamiento y forzar una comparación estricta de las cadenas de ruta, puede añadir el modificador .strict:
<nav> <a href="/publicaciones/" wire:current.strict="font-bold">Panel</a></nav>Solución de problemas
Si wire:current no detecta correctamente el enlace actual, asegúrese de lo siguiente:
- Tiene al menos un componente Livewire en la página, o ha codificado
@livewireScriptsen su diseño. - Tiene un atributo
hrefen el enlace.