Présentation de l’interface utilisateur

Architecture

L’interface utilisateur de base d’Univer est conçue selon le schéma suivant :

La combinaison de différents plugins permet d’ajouter diverses fonctionnalités et vues à cette base, jusqu’à former une application complète.

Système de design

Le système de design d’Univer repose sur Tailwind CSS. Il définit un ensemble de design tokens qui sont réutilisés par le moteur de rendu afin de garantir la cohérence des styles entre ce dernier et la couche de présentation. Vous pouvez personnaliser les styles de votre application en modifiant ces tokens, qui se trouvent dans le package @univerjs/themes.

Composants

Univer utilise des composants React pour construire la couche de présentation. Les développeurs qui utilisent également React peuvent ainsi très facilement employer les composants d’Univer ou enregistrer leurs propres composants. Cela ne signifie toutefois pas que React est le seul moyen de créer des composants personnalisés : Univer prend aussi en charge d’autres technologies, telles que Vue (version 3.x) et les Web Components.

Tous les composants de base se trouvent dans le package @univerjs/design, tandis que les composants d’icônes sont regroupés dans le package @univerjs/icons. Ces composants peuvent également être utilisés indépendamment d’Univer.

Les composants personnalisés sont souvent utilisés dans les cas suivants :

• Ajout de boutons personnalisés dans le Ribbon / Context Menu
• Intégration de composants personnalisés dans la Sidebar / Popup, etc.
• Remplacement des composants intégrés

Les chapitres suivants expliquent en détail comment enregistrer et utiliser des composants personnalisés.

Ordre des menus et disposition en grille

Utilisez order, gridLayout et updateMenuConfig() pour régler l’ordre des onglets, groupes et éléments, leur disposition en grille et les mises à jour à l’exécution. Le guide renvoie également aux options Facade des menus personnalisés.