@univerjs-pro/boards-ui
@univerjs-pro/boards-ui provides the interactive board workbench UI for Univer Board.
Package Overview
| Package | UMD global | CSS | Locales | Facade entry |
|---|---|---|---|---|
@univerjs-pro/boards-ui |
UniverProBoardsUi |
Yes | Yes | No |
Capabilities
- Renders the board canvas, grid, viewport, selections, resize handles, connector controls, and text editing layer.
- Provides toolbar tools for selection, shapes, text, connectors, containers, swimlanes, mind maps, tables, ink, resources, import, export, and translation.
- Registers keyboard shortcuts, context menus, floating shape editor actions, element ordering controls, and board settings UI.
- Bridges board elements to render objects and lets feature packages append additional element render adapters.
- Integrates with docs text editing services so board shape text can reuse the same rich text editing experience.
Installation
pnpm add @univerjs-pro/boards-ui
# or
npm install @univerjs-pro/boards-uiKeep all @univerjs/* and @univerjs-pro/* packages on the same version.
Usage
import '@univerjs-pro/boards-ui/lib/index.css';
import EnUS from '@univerjs-pro/boards-ui/locale/en-US';
import { UniverBoardsPlugin } from '@univerjs-pro/boards';
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui';
univer.registerPlugin(UniverBoardsPlugin);
univer.registerPlugin(UniverBoardsUIPlugin);
// Merge EnUS into your Univer locale map when this package contributes UI text.Integration Notes
Register @univerjs-pro/boards before this package. Board feature UI packages such as @univerjs-pro/boards-mind-ui, @univerjs-pro/boards-table-ui, and @univerjs-pro/ink-ui should be registered alongside this package when those tools are enabled.