Современная, быстрая и удобная система управления сайтом

Встраиваемые компоненты

Архив записейКомментарии: 0Просмотров: 8380

Могут быть ситуации, когда компоненты могут содержать другие компоненты. Самый простой пример — соц.иконки. У нас есть компонент _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.

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)