Версия: 26.1.0 (в разработке)

Interface: CustomSidebarTabInfo

Интерфейс параметров пользовательской вкладки правой панели.

Вкладка может содержать произвольное содержимое: текст, элементы управления, текстовые блоки и другие компоненты. Все параметры вкладки передаются в одном объекте.

Remarks

Структура вкладки:

id — уникальный идентификатор
title — название (отображается на вкладке)
icon — иконка вкладки (опционально)
content — содержимое вкладки (элементы управления, текст, разделители)
resizable — возможность изменения размера пользователем
onOpen — обработчик события открытия вкладки
dockTo — позиция закрепления (не реализовано в v3.6)

Варианты содержимого:

HTML строка
Массив элементов управления и разделителей

Extends

BaseUiElement.HasTitle.MayHaveOrder.HasIcon

Properties

content

content: CustomSidebarContent

Содержимое вкладки.

Может быть либо HTML строкой, либо массивом элементов управления (кнопки, поля ввода, текст) с возможностью использования разделителей.

Remarks

Два варианта:

HTML строка — простое содержимое как HTML

content: '<h2>Заголовок</h2><p>Текст параграфа</p>'

Массив элементов — структурированное содержимое с элементами управления

content: [
  {
    type: 'controls',
    orientation: 'vertical',
    items: [...кнопки, поля, текст ]
  },
  'separator',
  {
    type: 'controls',
    items: [...ещё элементы ]
  }
]

Структурированное содержимое подходит для:

Форм с элементами управления
Списков с разделителями
Комплексного макета с разными ориентациями

See

CustomSidebarContent — типы содержимого
CustomSidebarControls — элементы управления

icon

readonly icon: string

Название встроенной иконки или SVG код пользовательской иконки.

Remarks

Если iconType === 'standard':

Должно быть названием встроенной иконки редактора
Примеры: 'Save', 'Delete', 'Settings', 'Help', 'Search', 'Download', 'Upload'
Полный список доступных иконок см. в документации редактора
Название чувствительно к регистру

Если iconType === 'svg':

Должно содержать валидный SVG код
Должен быть корректно оформлен XML
Может содержать только безопасные SVG элементы
Рекомендуется использовать viewBox для масштабируемости

Examples

{
  icon: 'Save',
  iconType: 'standard'  // или не указывать, это значение по умолчанию
}

{
  icon: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
        '<circle cx="12" cy="12" r="10" fill="currentColor"/>' +
        '</svg>',
  iconType: 'svg'
}

const customIconSvg = `
  <svg viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
          fill="currentColor"/>
  </svg>
`;

{
  icon: customIconSvg,
  iconType: 'svg'
}

See

iconType — тип иконки (standard или svg)

Inherited from

HasIcon.icon

iconType?

readonly optional iconType: "standard" | "svg"

Тип иконки, определяющий как интерпретировать поле icon.

Remarks

'standard' — встроенная иконка редактора:

Быстрая загрузка (уже в памяти)
Соответствует стилю редактора
Автоматически масштабируется и окрашивается
Поддерживает темы (светлая/тёмная)
Ограниченный выбор (только встроенные иконки)

'svg' — пользовательская SVG иконка:

Полная гибкость в дизайне
Можно использовать любую иконку
Меньше файлов (встроены в код)
Требует корректного SVG кода
Поддерживает CSS свойство currentColor для окраски

Default

'standard'

Example

Встроенная иконка (по умолчанию)

{
  icon: 'Settings'
  // iconType: 'standard' используется по умолчанию
}

SVG иконка

{
  icon: '<svg>...</svg>',
  iconType: 'svg'
}

Рекомендуемая SVG структура

{
  icon: `
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- viewBox позволяет масштабировать без потери качества -->
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
            fill="currentColor" />
      <!-- currentColor наследует цвет из контекста -->
    </svg>
  `,
  iconType: 'svg'
}

See

icon — содержимое иконки

Inherited from

HasIcon.iconType

id

readonly id: string

Уникальный идентификатор элемента пользовательского интерфейса.

Remarks

Требования:

Должен быть уникален среди всех элементов UI редактора
Не может быть пустой строкой
Не может содержать спецсимволы (кроме :, -, _)
Чувствителен к регистру (case-sensitive)

Использование:

Идентификация элемента при обновлении
Идентификация элемента при событиях
Ссылка на элемент в других местах кода

Соглашения:

'plugin:button:save'          // Кнопка надстройки
'plugin:input:username'       // Поле ввода
'plugin:panel:settings'       // Панель параметров
'plugin:group:formatting'     // Группа элементов

Example

// Создание элемента с уникальным id
{
  id: 'plugin:button:submit',
  title: 'Отправить',
  type: 'button'
}

// Использование id для обновления
editorApi.ui.updateUiNodes([
  {
    id: 'plugin:button:submit',
    updates: { disabled: false }
  }
]);

// Использование id для удаления
editorApi.ui.ribbon.removeTabs(['plugin:ribbon:tab']);

Inherited from

BaseUiElement.id

onOpen?

optional onOpen: Callback

Обработчик события, вызываемый при открытии вкладки.

Срабатывает когда пользователь кликает на вкладку или когда вкладка открывается программно через openTab.

Remarks

Использование:

Загрузка данных при открытии панели
Инициализация элементов управления
Обновление содержимого
Логирование активности
Запрос данных с сервера

Default

undefined (событие не обрабатывается)

Example

Загрузка данных при открытии

editorApi.ui.sidebar.addTab({
  id: 'plugin:sidebar:results',
  title: 'Результаты',
  content: [...],
  onOpen: editorApi.createCallback(async () => {
    // Загрузить данные
    const results = await fetchResults();

    // Обновить содержимое
    editorApi.ui.updateUiNodes([
      {
        id: 'plugin:results:text',
        updates: {
          content: JSON.stringify(results, null, 2)
        }
      }
    ]);
  })
});

See

Callback — тип обработчика
EditorApi.createCallback — создание обработчика

order?

readonly optional order: number

Число, определяющее позицию элемента среди аналогичных элементов в родительском контейнере.

Remarks

Правила сортировки:

Элементы сортируются по возрастанию (меньшее order — левее или выше)
Элементы расположены по возрастанию значения order
Контейнер автоматически переупорядочивает элементы при изменении order

Рекомендуемые значения:

10, 20, 30 — для встроенных элементов
15, 25, 35 — для пользовательских элементов

Примеры:

// На ленте
{ id: 'tab:file', order: 10 }      // Слева
{ id: 'tab:edit', order: 20 }      // В середине
{ id: 'plugin:tab', order: 100 }   // Справа

// В меню
{ id: 'copy', order: 10 }
{ id: 'cut', order: 20 }
{ id: 'separator', order: 30 }
{ id: 'paste', order: 40 }

Inherited from

CustomRibbonTabInfo.order

resizable?

optional resizable: boolean

Флаг позволяющий пользователю изменять размер вкладки вручную.

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

Remarks

Поведение:

true — пользователь может перетаскивать границу панели
false (default) — размер фиксирован

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

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

Default

false

Example

editorApi.ui.sidebar.addTab({
  id: 'plugin:sidebar:panel',
  title: 'Панель',
  resizable: true,  // Позволяет изменять размер
  content: [...]
});

title

readonly title: string

Название/заголовок элемента пользовательского интерфейса.

Remarks

Требования:

Должен быть локализирован (переведён на язык пользователя)
Должен быть понятным и кратким
Не должен быть пустой строкой
Может содержать спецсимволы (кроме < и >)

Примеры:

"Сохранить документ"
"Экспортировать в PDF"
"Параметры надстройки"
"Об приложении"

Советы:

Используйте глаголы для действий (Сохранить, Удалить)
Используйте существительные для панелей (Параметры, Информация)
Сохраняйте названия короткими
Будьте конкретными (не просто "Опции", а "Параметры надстройки")

Example

{
  id: 'button:save',
  title: 'Сохранить',        // Локализирован
  type: 'button'
}

Inherited from

HasTitle.title

Remarks​

Extends​

Properties​

content​

Remarks​

See​

icon​

Remarks​

Examples​

See​

Inherited from​

iconType?​

Remarks​

Default​

Example​

See​

Inherited from​

id​

Remarks​

Example​

Inherited from​

onOpen?​

Remarks​

Default​

Example​

See​

order?​

Remarks​

Inherited from​

resizable?​

Remarks​

Default​

Example​

title​

Remarks​

Example​

Inherited from​

Remarks

Extends

Properties

content

Remarks

See

icon

Remarks

Examples

See

Inherited from

iconType?

Remarks

Default

Example

See

Inherited from

id

Remarks

Example

Inherited from

onOpen?

Remarks

Default

Example

See

order?

Remarks

Inherited from

resizable?

Remarks

Default

Example

title

Remarks

Example

Inherited from