# UI 概要

- Human documentation: [https://docs.univer.ai/ja-JP/guides/bases/ui/overview](https://docs.univer.ai/ja-JP/guides/bases/ui/overview)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/bases/ui/overview.md](https://docs.univer.ai/ja-JP/guides/bases/ui/overview.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [bases/ui/overview.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/ui/overview.ja-JP.mdx)

---

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

## ワークベンチを登録する

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

```ts
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)
```

インポート、スタイル、ロケールについては[インストールと基本的な使い方](https://docs.univer.ai/ja-JP/guides/bases/getting-started/installation.md)を参照してください。

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

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

```ts
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` を設定してください。