UI 概要

アーキテクチャ

Univer のベース UI は、以下の図に基づいて設計されています：

さまざまなプラグインを組み合わせることで、ベースに様々な機能とビューが追加され、最終的に完全なアプリケーションが形成されます。

デザインシステム

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 オプションへのリンクもあります。