Категории

Популярные тэги

Определение активных ссылок в меню

  • 17 февраля 2021
  • 343
  • Нет комментариев

Почти на всех сайтах необходимо, чтобы пользователь видел, где он сейчас находится. Один из наиболее популярных способов сделать это визуально — подсветить ссылку в меню. Это основы UX:

tabs-1-1024x158.png

Проблема не в том, чтобы в ссылку поставить класс «active», а в том, как определить, соответствует ли маршрут ссылке. Не волнуйтесь, Ларавел наколдовал нам немного магии.

Определение маршрута или паттерн адреса

Один из крутых хелперов в фреймворке называется is(). Этот метод доступен для Request и Route и позволяет сравнивать строку с адресом или именем, соответственно. Наш Пользователь может зайти в список подкастов, показывающий последние опубликованные подкасты. Если так и есть, то мы вставляем класса «active» в ссылку, который подсвечивает кнопку.

Код кнопки следующий: 

<a href="/podcast" class="header-button">
    All Podcasts
</a>

Теперь, когда у нас есть кнопка, нам нужно внедрить класс, если этот маршрут — podcasts или что-то включительно с подстановочным знаком * (wildcard). Мы можем просто использовать метод request()->is() и проверить тот ли это маршрут, что мы ожидаем. 

<a href="/podcasts" 
    class="{{ request()->is('podcasts/*') ? 'active' : null }}">
    All Podcasts
</a>

Но есть и другой вариант: проверить название маршрута. Если мы называли наши маршруты соответственно, то мы можем также использовать хелпер маршрутов, чтобы проверить является ли текущий маршрут podcasts и включительно, или нет. Синтаксис такой же, как в исходном коде. 

<a href="{{ route('podcasts') }}" 
    class="{{ route()->is('podcasts-*') ? 'active' : null }}">
    All Podcasts
</a>

 

Вот и всё! Не нужно скачивать пакеты или писать полотна кода. Конечно, это компромисс, если вы работаете с несколькими ссылками, но всегда можно автоматически сгенерировать весь список в цикле, чем создавать каждую ссылку вручную.

И, говоря об упрощении жизни, вы можете создать свою собственную команду Blade для автоматической обработки этого кода: 

Blade::directive('linkactive', function ($route) {
    return "<?php echo route()->is($route) ? 'active' : null; ?>";
});

И пока вы это делаете, проверяйте активный маршрут или адрес всего один раз, вместо того, чтобы сравнивать каждый элемент списка, это будет слишком затратно — просто представьте себе сравнение маршрута podcasts/* 100 раз в каждом запросе, безумие!



Загрузка комментариев...