side menu

Редактор стилей

Начиная с версии системы 2026.4 в дизайнере интерфейсов доступен редактор стилей. Это инструмент, который позволяет задать для виджетов цвета, шрифты, размеры, отступы и т. п. с помощью языка CSS.

Особенности редактора стилей:

  1. При написании кода доступно автодополнение, а также проверки на ошибки.
  2. Стили изолированы в рамках настраиваемой формы, страницы или пользовательского виджета. В отличие от стилей, настроенных в виджете Код, в редакторе стандартные свойства языка CSS не повлияют на отображение окружающих элементов интерфейса.
  3. Настроенные стили применяются к виджетам на поле для моделирования, поэтому вы можете посмотреть результат без публикации.

О других способах изменения внешнего вида интерфейсов читайте в статье в статье о способах настройки стилей.

Открыть редактор стилей

Чтобы начать работу с редактором, в дизайнере интерфейсов на вкладке Шаблон нажмите кнопку Редактор стилей. Рядом с полем для моделирования откроется панель для написания кода.

Вы можете изменить:

  • расположение редактора — установите панель слева, справа или снизу от шаблона, нажав значок шестерёнки и выбрав нужную опцию;
  • размер редактора — вы можете сузить или расширить панель с помощью значка двух полосок на её границе.

style-editor-1

Настроить стили для виджетов

Чтобы определить внешний вид виджетов, нужно задать для них пользовательские классы, по которым определяется, какие стили к ним применить. Затем нужно настроить стили на языке CSS.

Допустим, вы настраиваете на форме виджет Контейнер, в котором размещаются кнопки. Рассмотрим, как добавить для него класс и определить его внешний вид в редакторе стилей:

  1. В дизайнере интерфейсов откройте настройки виджета Контейнер.
  2. На вкладке Системные создайте для виджета пользовательский класс. Для этого в поле HTML классы введите его название, например buttons-panel, и нажмите клавишу Tab.

style-editor-2

  1. Нажмите на название добавленного класса, чтобы быстро перейти в редактор стилей. Откроется строка кода, где задаются стили для этого класса.
  2. Определите стили для класса buttons-panel, используя язык CSS.

Рекомендуем вместо фиксированных значений свойств использовать дизайн‑токены, чтобы сохранять единообразие стилей во всех частях системы.

начало примера

Пример настройки стилей

Чтобы задать для виджета ширину, отступы, радиус скругления границ и цвет фона, напишите в редакторе стилей код:

.buttons-panel {
    width: auto;
    padding: var(--el-b-spacing-x) var(--el-b-spacing-2x);
    margin: var(--el-b-spacing-3x);
    border-radius: var(--el-b-border-radius-3x);
    background-color: var(--el-b-color-background-accent-delicate);
}

конец примера

  1. Нажмите в редакторе стилей кнопку Применить. Новый стиль применится к виджету Контейнер, так как в его настройках указан класс buttons-panel.

style-editor-3

  1. Чтобы изменения стали доступны пользователям, сохраните и опубликуйте форму.

Вы можете применить один стиль к разным элементам интерфейса, указав в настройках нескольких виджетов одинаковый пользовательский класс.

apply-styles.html design-tokens.html