Директива wire:current

Директива wire:current используется в навигационных элементах для автоматического добавления CSS-класса при совпадении текущего URL с переданным значением. В значение передаётся путь, с которым сравнивается текущий URL. Директива позволяет добавлять классы для активных ссылок, пунктов меню и других навигационных элементов.

Синтаксис

<a href="/users" wire:current="active">
	Users
</a>

В этом примере при переходе на страницу /users элементу a будет добавлен класс active.

Пример

Давайте создадим компонент навигации, который подсвечивает активную ссылку:

<nav>
	<ul>
		<li>
			<a href="/" wire:current="active">Home</a>
		</li>
		<li>
			<a href="/users" wire:current="active">Users</a>
		</li>
		<li>
			<a href="/posts" wire:current="active">Posts</a>
		</li>
	</ul>
</nav>

При нахождении на странице /users HTML-код будет выглядеть так:

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/users" class="active">Users</a>
		</li>
		<li>
			<a href="/posts">Posts</a>
		</li>
	</ul>
</nav>

Класс active автоматически добавляется к ссылке на текущую страницу.

Пример с вложенными путями

Директива wire:current поддерживает вложенные пути. Например, для страницы /users/1 активной будет считаться ссылка /users:

<nav>
	<ul>
		<li>
			<a href="/" wire:current="active">Home</a>
		</li>
		<li>
			<a href="/users" wire:current="active">Users</a>
		</li>
		<li>
			<a href="/posts" wire:current="active">Posts</a>
		</li>
	</ul>
</nav>

При переходе на страницу /users/5 ссылка на /users получит класс active:

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/users" class="active">Users</a>
		</li>
		<li>
			<a href="/posts">Posts</a>
		</li>
	</ul>
</nav>

Пример с точным совпадением

Для точного сравнения URL используйте модификатор .exact:

<nav>
	<ul>
		<li>
			<a href="/users" wire:current.exact="active">Users</a>
		</li>
		<li>
			<a href="/users/create" wire:current.exact="active">Create User</a>
		</li>
	</ul>
</nav>

Теперь на странице /users активной будет только первая ссылка, а на странице /users/create - только вторая:

data-scen="URL: /users"

<nav>
	<ul>
		<li>
			<a href="/users" class="active">Users</a>
		</li>
		<li>
			<a href="/users/create">Create User</a>
		</li>
	</ul>
</nav>

data-scen="URL: /users/create"

<nav>
	<ul>
		<li>
			<a href="/users">Users</a>
		</li>
		<li>
			<a href="/users/create" class="active">Create User</a>
		</li>
	</ul>
</nav>

Пример с несколькими классами

Можно указать несколько классов через пробел:

<a href="/users" wire:current="active current-page">
	Users
</a>

При активном URL элементу добавятся оба класса: active и current-page.

Смотрите также

директиву wire:click,
которая обрабатывает клики по элементам
директиву wire:navigate,
которая позволяет переходить между страницами без перезагрузки
директиву wire:model,
которая привязывает поле ввода к свойству компонента
директиву wire:loading,
которая управляет отображением во время загрузки