Skip to content
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  1. Компоненты
  2. PageBuilder
  3. Типы полей
  4. Free
  5. color

Поле color

Версия: Free.

Зачем этот тип

Color picker вместо ручного ввода в text. Подходит для фона секции и акцентного цвета. Значение строка, в chunk в CSS inline или variable.

Когда использовать

  • Цвет фона hero, overlay, кнопки
  • Акцентная рамка или badge
  • Когда палитра не фиксирована заранее

Советы

Фиксированный brand-набор: colorpalette. Проверяйте контраст текста на выбранном фоне в chunk.

Похожие типы

  • colorpalette для options из JSON
  • select если цвета зашиты как именованная тема

Настройка

json
{
  "name": "accent",
  "type": "color",
  "label": "Акцент",
  "tab": "Контент",
  "width": 100,
  "active": true
}

Значение

HEX-строка.

Данные секции

Ключ accent в данных секции (HEX):

json
{
  "accent": "#3b82f6"
}

Пример в chunk

html
<span style="color: {$accent|escape}">…</span>

Общие свойства

Для полей с name, которые сохраняются в данных секции:

КлючТипРольПанель
tabstringПодзаголовок группы в инспектореда
width25–100Ширина поля в % строки (flex)да
descriptionstringПодсказка под подписьюда
defaultanyНачальное значение новой секциида
activeboolfalse: скрыть поле в инспектореда
requiredboolОбязательно при publish (черновик сохраняется)да

Подробнее: обзор полей.

Дальше