Interface: CustomRibbonTabInfo

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

Вкладка — это верхнеуровневый контейнер, содержащий группы элементов. Несколько вкладок располагаются горизонтально на ленте, пользователь выбирает нужную вкладку.

Полная информация о вкладке передаётся в одном объекте: все параметры (идентификатор, название, расположение, группы) находятся в одном месте.

Remarks

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

• id — уникальный идентификатор (обычно 'plugin:ribbon:tab')
• title — название вкладки (отображается на вкладке)
• order — позиция среди других вкладок
• groups — массив групп с элементами управления

Расположение вкладок:

• order = 10 → левая часть ленты
• order = 20 → середина ленты
• order = 30 → правая часть ленты
• Вкладки сортируются по порядку возрастания order

Extends

• BaseUiElement.HasTitle

Properties

groups

readonly groups: CustomRibbonGroup[]

Массив групп элементов, располагаемых на этой вкладке.

Каждая группа содержит логически связанные элементы управления. Группы разделяются вертикальными линиями для визуального отделения.

Remarks

Организация:

• Группы располагаются слева направо в порядке их появления в массиве
• Каждая группа имеет свой id для уникальной идентификации
• Элементы в группе располагаются горизонтально

Рекомендации:

• 2-4 группы на вкладку оптимально
• Группируйте логически связанные функции
• Используйте названия групп для пояснения назначения

Example

groups: [
  {
    id: 'plugin:group:main',
    type: 'controls',
    controls: [ ..кнопки ]
  }
]

Вкладка с несколькими группами

groups: [
  {
    id: 'plugin:group:format',
    title: 'Форматирование',
    type: 'controls',
    controls: [ ..кнопки форматирования ]
  },
  {
    id: 'plugin:group:export',
    title: 'Экспорт',
    type: 'controls',
    controls: [ ..кнопки экспорта ]
  }
]

See

CustomRibbonGroup — структура группы

---

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

---

order

readonly 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

HasOrder.order

---

title

readonly title: string

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

Remarks

Требования:

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

Примеры:

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

Советы:

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

Example

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

Inherited from

HasTitle.title