Контролы Custom Containers

Контролы описывают, какие параметры Custom Container можно менять в правой панели редактора.

Поле resizable не является контролом. Это общее свойство контейнера, которое определяет, можно ли менять размер resize-ручками в редакторе.

Если контейнеру не нужны настройки, передайте пустой tool:

tool: {
  sectionsConfig: {},
  controlsConfig: {}
}

Базовый формат

tool: {
  sectionsConfig: {
    CustomContainerSection: {
      widgetProperties: ['productId', 'theme', 'enabled']
    }
  },
  controlsConfig: {
    productId: {
      type: 'TextInput',
      params: {
        label: 'Product ID',
        placeholder: 'sku-123'
      }
    },
    theme: {
      type: 'Tabs',
      params: {
        label: 'Theme',
        options: [
          { id: 'light', label: 'Light' },
          { id: 'dark', label: 'Dark' }
        ],
        variant: 'secondary'
      }
    },
    enabled: {
      type: 'Toggle',
      params: {
        label: 'Enabled'
      }
    }
  }
}

sectionsConfig.CustomContainerSection.widgetProperties задает список параметров и порядок их отображения.

controlsConfig описывает, каким контролом редактировать каждый параметр.

Где хранятся значения

Начальные значения задаются в customProps:

customProps: {
  productId: '',
  theme: 'light',
  enabled: true
}

Когда дизайнер меняет контрол, значение сохраняется в этом параметре контейнера. В итоговом HTML параметры доступны как атрибуты:

data-vrstk-custom-param-product-id="sku-123" data-vrstk-custom-param-theme="dark" data-vrstk-custom-param-enabled="true"

Ключи преобразуются в kebab-case: productId становится product-id, openInNewTab становится open-in-new-tab.

Важное ограничение

Контролы не подставляют значения обратно в поле html автоматически.

Если контейнер содержит HTML:

html: '<a class="client-buy-button">Купить</a>'

и дизайнер поменял параметр label, исходная HTML-строка не перепишется сама. Новое значение будет сохранено как параметр контейнера и попадет в HTML-атрибут. Сайт клиента должен использовать эти параметры при замене маркера или при своей JS-инициализации.

Рекомендуемые типы контролов

Для Custom Containers лучше использовать простые универсальные контролы.

Тип	Для чего	Основные параметры
TextInput	Строки, ID, URL, slug, текст кнопки	label, placeholder
NumberInput	Числа, приоритет, лимиты, количества	label, min, max, step, postfix
Tabs	Выбор одного варианта из короткого списка	label, options, variant
Toggle	Булево значение в виде переключателя	label
Checkbox	Булево значение в виде чекбокса	label
Dropdown	Выбор одного варианта из длинного списка	label, options
Color	Цвет, если он нужен клиентскому виджету	label

В редакторе есть и более специализированные контролы, но для клиентских контейнеров их лучше не использовать без отдельной договоренности: они могут быть завязаны на внутренние типы виджетов Verstka.

TextInput

title: {
  type: 'TextInput',
  params: {
    label: 'Title',
    placeholder: 'Введите заголовок'
  }
}

Подходит для:

• ID виджета;
• URL;
• slug;
• текстов;
• CMS-ключей.

NumberInput

priority: {
  type: 'NumberInput',
  params: {
    label: 'Priority',
    min: 1,
    max: 10,
    step: 1,
    roundTo: 'integers'
  }
}

Подходит для:

• приоритета;
• лимита элементов;
• количества колонок;
• таймаута;
• числового ID, если он действительно числовой.

Tabs

variant: {
  type: 'Tabs',
  params: {
    label: 'Variant',
    options: [
      { id: 'compact', label: 'Compact' },
      { id: 'wide', label: 'Wide' }
    ],
    variant: 'secondary'
  }
}

Подходит для коротких списков: тема, размер, вариант отображения, позиция.

Toggle

showAvatar: {
  type: 'Toggle',
  params: {
    label: 'Show avatar'
  }
}

Подходит для включения или выключения опции.

Checkbox

closable: {
  type: 'Checkbox',
  params: {
    label: 'Closable'
  }
}

Тоже булево значение, но визуально выглядит спокойнее, чем Toggle.

Dropdown

placement: {
  type: 'Dropdown',
  params: {
    label: 'Placement',
    options: [
      { id: 'top', label: 'Top' },
      { id: 'inline', label: 'Inline' },
      { id: 'bottom', label: 'Bottom' }
    ]
  }
}

Подходит для длинных списков, где Tabs занимали бы слишком много места.

Color

accentColor: {
  type: 'Color',
  params: {
    label: 'Accent color'
  }
}

Используйте, если клиентский виджет действительно должен получать цвет из редактора.

Дополнительные флаги

У каждого контроля можно передать служебные флаги:

Флаг	Описание
hide	Скрывает контрол. Обычно не нужен в клиентских конфигах.
propagate	Управляет распространением значения на дочерние контейнеры. Для Custom Containers обычно не нужен.
propagateDelta	Применяет дельту значения к дочерним контейнерам. Обычно внутренний сценарий редактора.
propagateScale	Масштабирует дочерние контейнеры. Обычно внутренний сценарий редактора.
skipSelf	Не применяет значение к самому выбранному контейнеру. Обычно внутренний сценарий редактора.

Для клиентских контейнеров в большинстве случаев достаточно type и params.