Обзор интерфейса

Архитектура

Базовый UI Univer спроектирован в соответствии со следующей схемой:

Различные плагины добавляют в эту основу функции и представления, которые в итоге образуют полноценное приложение.

Система дизайна

Система дизайна Univer построена на Tailwind CSS и содержит набор дизайн-токенов, которые повторно используются движком отрисовки. Это обеспечивает единообразие стилей между движком отрисовки и слоем представления. Чтобы настроить стили приложения, можно изменить эти токены, хранящиеся в пакете @univerjs/themes.

Компоненты

Univer использует компоненты React для построения слоя представления, поэтому разработчикам, которые также работают с React, очень просто использовать компоненты Univer или регистрировать собственные. При этом пользовательские компоненты не обязательно создавать только на React: Univer поддерживает и другие технологии, например Vue версии 3.x и Web Components.

Все базовые компоненты находятся в пакете @univerjs/design, а компоненты значков — в пакете @univerjs/icons. Их также можно использовать независимо от Univer.

Пользовательские компоненты часто применяются в следующих случаях:

• Добавление пользовательских кнопок в Ribbon / Context Menu
• Интеграция пользовательских компонентов в Sidebar / Popup и другие элементы
• Замена встроенных компонентов

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

Порядок меню и сеточная раскладка

order, gridLayout и updateMenuConfig() задают порядок вкладок, групп и пунктов, положение в сетке и обновление во время работы. В руководстве также есть ссылки на параметры Facade для своих меню.