Могут быть ситуации, когда компоненты могут содержать другие компоненты. Самый простой пример — соц.иконки. У нас есть компонент _social, который выводит иконки на сайте. Но, поскольку компонент начинается с «_», то он не появляется в настройках админ-панели. То есть такой компонент изначально расчитан на встраивание в другие компоненты.
Для примера рассмотрим вариант предыдущей шапки из файла custom/top2.php. Добавим социконки с правого края.
Выглядеть это будет примерно так:
Очевидно, что нужно добавить ещё одну flex-ячейку после меню.
...
<div class="flex-grow0 w100-tablet pad10 t-center-tablet t-gray200 links-no-color links-hover-t-blue200">
{% if ($fn = mso_fe('components/_social/_social.php')) require($fn); %}
</div>
...
Класс .flex-grow0 устанавливает «жадность» в ноль, то есть это будет самая маленькая ячейка. При этом flex-сетка прижимает крайние ячейки к краям контейнера, поэтому получится, что этот блок окажется выровненным вправо. Если бы не такое поведение flex-сетки, то пришлось бы исхитряться с шириной ячейки и выравниванием вправо.
Поскольку социконки формируются компонентом _social.php, то заглянут в него, мы увидим, что это обычные ссылки a.my-social, которые следуют одна за другой. Таким образом мы можем определить цвет иконок простым .t-gray200 и .links-no-color, который заставляет ссылки принять цвет контейнера.
Класс .links-hover-t-blue200 прописывает цвет ссылок при наведении.
Что нужно сделать, чтобы изменить цвет какой-то одной иконки? Поскольку UniCSS доступен в любой части шаблона, то мы можем указать нужные классы прямо в админ-панели. Идём в Настройки шаблона — Соц.сети.
В подсказке читаем, что иконки задаются в таком формате:
иконка = адрес | подсказка | дополнительный css-класс
Мы можем указать дополнительные css-классы для произвольной иконки, например так:
twitter = //twitter.com/maxsite | Мой Twitter | t-yellow hover-t-yellow200
Теперь рассмотрим встраивание компонента основного меню. Он имеет некоторые особенности, которые нужно учитывать.
Есть два компонента menu и _menu. Первый отображается в админ-панели, а второй содержит html-каркаc для встраивания. То есть для вставки нужно использовать _menu.
Сам по себе _menu самодостаточен, но его желательно обрамить в контейнер. В menu это обычные layout-блоки.
Поскольку меню довольно сложное (по верстке и поведению), то для настройки его внешнего вида используется _menu.scss (и _mix-menu.scss - здесь sass-функции). Все настройки вынесены в _menu.scss в начало файла. Настраивать меню придется для каждого шаблона индивидуально, поэтому я советую потренироваться и сделать какие-то свои варианты.
Обратите внимание, что меню настраивается в двух вариантах — десктоп и планшет/телефон. Для проверки используйте режим мобильного просмотра в FireFox — Ctrl+Shift+M.