コンテナーとスイムレーン

コンテナーを使用すると、Boards で枠付き領域、スイムレーン、UML パッケージブロックなどの親子構造を表現できます。コンテナーへの所属情報は子要素の parentId に保存され、スイムレーンの場合は laneId にも保存されます。

コンテナーを作成する

TypeScript
const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active Board')const containerId = 'scope'const containerCreated = board.createContainer({  id: containerId,  title: 'Scope',  left: 80,  top: 80,  width: 640,  height: 360,})if (!containerCreated) {  throw new Error('Cannot create container')}

要素をコンテナーに移動する

TypeScript
board.moveElementsToContainer(['card-1', 'card-2'], containerId)board.fitContainerToContent(containerId)

所属動作を設定する

TypeScript
board.setContainerMembershipLocked(containerId, true)board.setContainerAutoResize(containerId, false)

スイムレーン

スイムレーンは、レーン設定を持つコンテナーです。レーンの追加、削除、サイズ変更、並べ替え、折りたたみ、名前変更には、専用のファサード API を使用します。

TypeScript
const swimlaneId = 'delivery'const swimlaneCreated = board.createSwimlane({  id: swimlaneId,  left: 80,  top: 80,  width: 720,  height: 360,  orientation: 'horizontal',  lanes: [    { id: 'todo', title: 'Todo', size: 240 },    { id: 'done', title: 'Done', size: 240 },  ],})if (!swimlaneCreated) {  throw new Error('Cannot create swimlane')}board.renameSwimlaneLane(swimlaneId, 'todo', 'Backlog')

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

© 2026 DreamNum Co., Ltd.