Floating Groups

This section describes floating groups.

Floating groups cannot be maximized. Calling maximize function on groups in these states will have no effect.

Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.

Options

The following properties can be set to configure the behaviours of floating groups.

You can control the bounding box of floating groups through the optional floatingGroupBounds options:

• boundedWithinViewport will force the entire floating group to be bounded within the docks viewport.
• {minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number} sets the respective dimension minimums that must appears within the docks viewport
• If no options are provided the defaults of 100px minimum height and width within the viewport are set.

API

The following properties can be used to create floating groups

addFloatingGroup	Add a floating group addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, options: FloatingGroupOptions): void

addFloatingGroup only accepts existing panels and groups. See Addding Panels on how to firstly add panels.

Floating groups can be programatically added through the dockview api method api.addFloatingGroup(...).

Panel and Group API

location	readonly location: DockviewGroupLocation
onDidLocationChange	readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>

You can check whether a group is floating via the group.api.location property. See examples for full code.

Working with Floating Groups

Float an existing tab by holding shift whilst interacting with the tab

Move a floating tab by holding shift whilst moving the cursor or dragging the empty header space

Move an entire floating group by holding shift whilst dragging the empty header space

Live Example