Поле colorpalette

Версия: Free.

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

Редактор выбирает цвет из заданного списка, а не любой код. Варианты задаются так же, как у select, только показаны образцами. Так на сайте реже появляются случайные цвета.

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

• Основные, дополнительные и приглушённые цвета темы
• Фон секции из готового набора
• Короткий список цветов для сайтов на одной теме

Советы

Свой код цвета вводят полем color. В данных сохраняется ключ варианта, не готовое CSS-правило.

Похожие типы

• color, если нужен любой цвет
• select, если образцы цвета не нужны

Настройка

{
  "name": "theme",
  "type": "colorpalette",
  "label": "Цвет",
  "swatches": [
    "#111827",
    "#c2410c"
  ],
  "tab": "Контент",
  "width": 100,
  "active": true
}

Значение

HEX-строка.

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

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

{
  "theme": "#3b82f6"
}

Пример в chunk

modx

<span style="color: [[+theme]]">…</span>

fenom

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

Примечание

В панели управления: optionsText (как у select); при сохранении пишутся options и swatches.

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

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

Ключ	Тип	Роль	Панель
tab	string	Подзаголовок группы в инспекторе	да
width	25–100	Ширина поля в % строки (flex)	да
description	string	Подсказка под подписью	да
default	any	Начальное значение новой секции	да
active	bool	false: скрыть поле в инспекторе	да
required	bool	Обязательно при publish (черновик сохраняется)	да

• Дополнительно: swatches или options со цветами.

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

Дальше

• Справочник типов
• Обзор полей