Перейти к основному содержимому
Версия: Next

Interface: CustomRibbonTabInfo

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

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

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

Remarks​

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

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

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

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

Extends​

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',
        disabled: false,
    }
]);

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

Inherited from​

BaseUiElement.id

order​

readonly order: number

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

Remarks​

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

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

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

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

Примеры:

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

Inherited from​

HasOrder.order

title​

readonly title: string

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

Remarks​

Требования:

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

Примеры:

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

Советы:

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

Example​

{
    id: 'button:save',
    title: 'Сохранить',
    type: 'button'
}

Inherited from​

HasTitle.title