Особенности разработки для конструктора

В окне настроек каждого блока есть вкладка “Оформление”. С помощью этой вкладки можно управлять такими свойствами блока, как:

скрытие/отображение блока
компоновка элементов блока (последовательная, плитки, flexbox, слайдер и пр.)
цветовая палитра
свойства текста и заголовков
свойства полей форм, кнопок, ссылок, таблиц
внутренние и внешние отступы
горизонтальное выравнивание
параметры ширины и высоты
настройки фона (цвет, изображение, видео, параллакс)
рамка, тень, скругление углов
положение на странице (relative, absolute, fixed, sticky)
эффекты появления и трансформация

Также некоторые из этих свойств применимы к элементам блока (например, к плитке каждой конкретной плитке новости в списке новостей). Настройка оформления поддерживает адаптивность: вы можете переопределить любые параметры (например, количество плиток в строке или саму компоновку) на каждом диапазоне ширины блока или экрана.

Для того, чтобы эти настройки были применимы к компоненту, при верстке шаблонов нужно следовать нескольким правилам.

Не определять в шаблоне компоновку списка (например, плитками или флексбоксом): список элементов блока (объектов) без настроенной у блока компоновки должен выводиться последовательно сверху вниз и занимать всю доступную ширину контейнера. Исключение: случаи, когда блок должен быть выведен исключительно определенным способом, например, в виде таблицы, где в строке выводятся несколько полей объекта.
Не определять в шаблоне отступы, параметры ширины/высоты, выравнивание; параметры шрифтов, значения цвета; свойства оформления кнопок, полей формы, ссылок, таблиц; рамки тени, скругления самого блока и его элементов.
Для цветов, задаваемых макетом, используются стандартные CSS-переменные. Задаётся пять базовых цветов, формирующие цветовую палитру:
- a. фон (--tpl-color-background-main)
- b. акцентированный фон (--tpl-color-background-accent)
- c. «фирменный» цвет (--tpl-color-brand)
- d. текст/элементы переднего плана (--tpl-color-foreground-main)
- e. акцент текста (--tpl-color-foreground-accent)
Заголовки должны быть размечены тегами h1, h2, h3, h4, h5, h6. Для блоков, которые должны выглядеть как заголовки, но семантически ими не являются, нужно использовать классы tpl-text-header1, tpl-text-header2, tpl-text-header3, tpl-text-header4, tpl-text-header5, tpl-text-header6. Класс «обычного» текста — tpl-text-default; для параграфа текста (с отступами) — tpl-text-paragraph. Класс “дополнительного” текста (как правило меньшего размера) - tpl-text-alt; для параграфа текста (с отступами) — tpl-text-alt-paragraph.
Стандартные классы кнопок: .tpl-button, .tpl-button-primary (для кнопки «основного» действия). Кнопке с action="submit" будут присвоены стили, соответствующие .tpl-button-primary. Если нужно, чтобы кнопка выглядела как «дополнительная», нужно использовать класс .tpl-button-secondary.

← Назад 12.8 Содержимое по умолчанию 12.10 Шаблоны действий Далее →

Наверх