Как стилизовать отдельный элемент меню в Wayfinder
Некоторые, казалось бы, элементарные задачи, не всегда лежат на поверхности. Возникла необходимость добавить пункт меню, с иным оформлением, чем было у остальных пунктов меню. Самым простым решением в лоб, было создание дополнительного класса, однако, как передать класс для отдельного пункта я так и не нашел. Можно использовать поле Link Attribute, для передачи дополнительного айди или класса, правда это не всегда удобно, так как было найдено еще более просто решение.
Сразу оговорюсь, что использование данного метода возможно для первого или последнего элемента. В моем случае это был последний элемент меню. Итак, в родительский чанк мы добавляем тот пункт меню, стилизацию которого мы хотим изменить.
<ul id="menu">
[+wf.wrapper+]
<li><a href="/hot-line/" class="hot">горячая линия</a></li>
</ul>
И тут сразу возникнет вопрос, как быть с данным пунктом меню, если он активен. Здесь нам на помощь приходит phx. Дорабатываем родительских чанк.
<li><a href="/hot-line/" class="hot[*phx:input=`[+wf. docid+]`:is=`номер документа`:then=` active`*]">горячая линия</a></li>
Вот такое простое решение данной задачи.
Комментарии (0)