UI 概要

@univerjs-pro/bases-ui は、ライセンスが必要な Univer Bases のブラウザーワークベンチを提供します。テーブルとビューのナビゲーション、グリッド、カンバン、カレンダー、ガント、ギャラリーの各ビュー、フィールドエディター、レコード詳細、メニュー、選択状態を描画します。

ワークベンチを登録する

Bases プラグインより先に ライセンスと数式エンジンを登録します。数式フィールドは @univerjs-pro/engine-formula を使用し、Sheets アプリケーションは必要ありません。

TypeScript
univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverBasesPlugin)univer.registerPlugin(UniverBasesUIPlugin)

インポート、スタイル、ロケールについてはインストールと基本的な使い方を参照してください。

初期レイアウトを設定する

IUniverBaseUIConfig はワークベンチの領域と、起動時に表示するテーブルおよびビューを制御します。

TypeScript
univer.registerPlugin(UniverBasesUIPlugin, {  workbench: {    header: true,    headerMenu: true,    content: true,    leftSidebar: true,    rightSidebar: false,    rightPanelMode: 'dock',  },  initialState: {    tableId: 'tasks',    viewId: 'kanban',  },})

読み取り専用にする場合は disableEdit を使用します。対応するフィールドがホスト提供データを必要とする場合だけ、attachment、personOptions、groupOptions を設定してください。

このガイドはいかがですか?

© 2026 DreamNum Co., Ltd.