#Tab groups and dock zones

The user makes a tab group by dragging a window onto another window. From code, workspace.GroupAsTabs(windows) puts windows in one new tab group. The TabsDemo.unity example shows window tabs and tabs inside a window.

Video tutorial: Docking. All videos: Video tutorials.

#Merge and the no-merge key

• During the drag, the window below the pointer shows a border in --tb-color-drop-target. A drop there makes the two windows tabs of one group.
• A drag of a tab out of its strip makes a standalone window again.
• Hold Shift during the drag to stop the merge. The border does not show, and the window lands on top of the other window. The key also stops a drop into a tab group or a dock zone.
• no-merge-modifier on the workspace sets the key: Shift (default), Control, Alt or None (no key).

<tb:Workspace no-merge-modifier="Alt" />

workspace.NoMergeModifier = EventModifiers.Control;

#Snap and the snap keys

During a drag or a resize, an edge of the window snaps to the edge of a window next to it and to the edges of the workspace. Three keys change a drag. Each key is a setting on the workspace, and None turns the key off.

• The keys work together: Shift with Alt gives a drag with no merge and no snap.
• Alt wins over Ctrl.
• Each key can be Shift, Control, Alt or None. Give each function a different key.

<tb:Workspace no-snap-modifier="Control" align-snap-modifier="None" />

workspace.NoSnapModifier = EventModifiers.None;        // the snap is always on
workspace.AlignSnapModifier = EventModifiers.Shift;

#Tab attention, badge and color

A window in a tab group can ask for the attention of the user. Its tab flashes, shows a badge, or has a look of its own.

var chat = workspace.GetWindow("chat");
chat.RequestAttention("3");                 // the tab flashes and shows the badge "3"
chat.TabBadgeTone = BadgeTone.Error;        // a red badge
chat.TabClass = "tab--boss";                // a USS class on the tab

chat.TabBadge = "";                         // removes the badge

• The selected tab does not flash, because the user already looks at it. A window without a tab does not flash.
• The badge stays when the user selects the tab. Remove it when the user has read the content, for example in FocusChanged.
• The flash color is --tb-tab-attention-color (default --tb-color-warning), and the text during the flash is --tb-tab-attention-text. Set them in the rule of your TabClass.

.tab--boss {
    --tb-tab-attention-color: var(--tb-color-danger);
    border-top-color: var(--tb-color-danger);
}

AttentionFlash.Set(element, true) in UIToolbox gives the same two classes to an element of your own, such as a button that waits for a click. AttentionFlash.IntervalMs is the time of each half of a flash (default 500).

#Dock zones

A dock zone is a persistent tab group at an edge of the workspace. Declare it in UXML:

<tb:Workspace>
  <tb:DockZone position="left" size="250" />
  <tb:DockZone position="right" size="300" />
</tb:Workspace>

In UI Builder, a dock zone draws an empty dock at its edge. It creates the dock window only in Play mode.

A dock zone has the id Dock_{position}. It uses DockPanelTemplate.uxml. It cannot be moved, focused or resized, and it stays open when it is empty. The arrange and tile methods do not move it.