
To use tabs in UI Toolkit, use the IMGUI version to instantiate a new window, and use a UI Toolkit container inside the window where you can add controls from UI Toolkit.
Primary tabs are rendered with the following styles when creating a new window.
IMGUI
Scripting API for GUI.Toolbar
All tabs have a similar base construction, though their contents may vary slightly, and possess the same base behaviours. While there is minor variation between different tabs with regards to their automatic resizing of panels or where they open in the Editor they are all fairly consistent at their core.
Tab labels contain the name of their window. These are meant to indicate the window’s purpose whether it is displayed or grouped behind other tabs. Tab labels should not be displayed vertically.
Only document window tabs, like the scene, game, or Inspector should have icons in their tab label. Tool window tabs do not have icons. Tab icons should follow the standard Iconography guidelines. Icons should be simple intelligible glyphs relating to the tab contents. Icons should be placed to the left of the header text with the following margins.
Tab container holds the tab label and icon (if applicable). The container is the area in which a tab’s context menu can be accessed. The tab container also holds the tab’s indicator which shows if the tab is being focused on.
Tabs have borders based on their order in the tab well (dock). While regular tabs .dragtab have borders on both sides, a tab docked in the first position .dragtab-first only has a right border.
The space within a panel that tabs inhabit is the tab well. Although this is technically part of a panel it has an important effect on tab behavior and anatomy; it represents the area in which tabs can inhabit and where other tabs will be grouped when placed in the same panel.
The tab well acts as a container for tab labels, allowing for the placement of tab navigation elements and panel UI. As a result it is persistent even if there are no other tabs in the panel to convey the grouping functionality.
Some tabs contain toolbars below their labels that affect their contents, either by changing the information being presented or altering the view in some way. The contents of a window toolbar can vary depending on the window they belong to and the actions that are useful within, including; search bars for assets, toggles for view modes, and dropdowns for tab layouts.
Right-clicking on a tab opens tab menu with the target tab options on top, and global tab options below.
When a new tab is opened via the menu option Add Tab, the new tab should appear to the right of the tab dock in the same tab group.
Tabs should close existing panels if they are the only occupant and are closed or dragged into other panels.
Tabs appear in panels throughout the workspace. Tabs will create new panels if placed in an unoccupied dock zone.
While the bulk of tab anatomy exists in the windows and panels they inhabit it is important to understand them in their own context. Tabs are made up of the tab title, tab container, tab well, and may sometimes include a window toolbar.
1. Tab container
2. Tab label
3. Tab icon
Tabs have 7 px horizontal padding on both sides to keep the label and icon legible.
Grouped tabs should be spaced evenly to prevent bunching and allow the user to easily distinguish each tab from the others. Tabs should never overlap.
When the number of tabs in a panel is such that their labels exceed the available tab well space the tab labels will enter the overflow state and invoke scroll on either side.
These tabs retain the normal tab behavior, however their label can be repositioned with the scroll commands.
Tab arrangement is determined by the user’s placement.
The default state is the pre-interaction state. Tab is not active.
When the cursor is over the default (inactive) tab element.
When the tab window is visible, but not focused.
When the user has clicked on a tab element to navigate to its window.