TabbedView Class
Description
Element for organizing content with tabs.
public class TabbedView : VisualElement, IEventHandler, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IResolvedStyleInheritance
Remarks
Set allowMultipleSelection true to support opening multiple tabs. Set allowTabsOverflow false to use multiple rows when tabs don't fit in a single line. Use the AddTab method that receives a VisualElement as a title if you need more than simple labels in the tabs. Pass a unique string to ApplyPersistenceKey(String) to remember the last opened tabs.
Examples
A basic usage example with three tabs.
class ACustomEditor : Editor
{
public override VisualElement CreateInspectorGUI()
{
var tabbedView = new TabbedView();
// Set allowMultipleSelection to view multiple tabs at the same time.
// It works by holding shift or ctrl (cmd on macOS) when clicking them.
tabbedView.allowMultipleSelection = true;
// Use AddTab to create new tabs.
// The first parameter is an element used as the tab's title.
// The second parameter is an element used as the tab's content.
tabbedView.AddTab(new Label("Tab 0"), new Label("Tab 0 Content"));
tabbedView.AddTab(new Label("Tab 1"), new Label("Tab 1 Content"));
// You can use a string for the tab's title if you only need some text.
tabbedView.AddTab("Tab 2", new Label("Tab 2 Content"));
// The first tab is selected by default. This selects Tab 2.
tabbedView.SetSelectedTab(2);
// This selects Tab 0 and Tab 1 without unselecting any other tab.
tabbedView.AddTabToSelection(0);
tabbedView.AddTabToSelection(1);
// This unselects Tab 2.
tabbedView.RemoveTabFromSelection(2);
// Listen to this event to know when a tab's selection status changes.
tabbedView.onTabSelectionChange += (index, selected) =>
{
if (selected)
Debug.Log($"Tab {index} selected");
else
Debug.Log($"Tab {index} unselected");
};
// Use a unique string as a key remember tab selection in views that use
// the same key. Make sure to call this after all the tabs are added.
tabbedView.ApplyPersistenceKey("ACustomEditor_TabsKey");
return tabbedView;
}
}Constructors
| TabbedView() |
Fields
| allowTabsOverflowUssClassName | USS class name of Tabbed Views that allow tabs overflow. |
| selectedTabUssClassName | USS class name of a selected tab element. |
| tabBarContainerUssClassName | USS class name of the element that contains the tab bar. |
| tabBarScrollLeftButtonUssClassName | USS class name of the button to scroll tabs to the left when allowTabsOverflow is true. |
| tabBarScrollRightButtonUssClassName | USS class name of the button to scroll tabs to the right when allowTabsOverflow is true. |
| tabBarUssClassName | USS class name of the bar that contains all the tabs. |
| tabContentDisplayUssClassName | USS class name of the element that contains all the tab contents. |
| tabContentUssClassName | USS class name of a single tab's content. |
| tabTitleUssClassName | USS class name of a tab's title. |
| tabUssClassName | USS class name of a tab element. |
| ussClassName | USS class name of elements of this type. |
Properties
| allowMultipleSelection | When true, allows showing multiple tabs at the same time by holding shift or ctrl (or cmd in macOS) while clicking a tab. It's false by default. |
| allowTabsOverflow | When true, the Tabbed View will keep tabs in a single row, clipping them when they don't fit and showing additional buttons to scroll through them. When false, tabs that don't fit will be wrapped around, adding as many rows of tabs as necessary to fit them all. |
| tabCount | Gets the number of tabs that have been added. Can be used to know the index of the tab that will be added next. |
| tabsScrollSpeed | The scroll speed for the tab bar when allowTabsOverflow is true. |
Methods
| AddTab(String, VisualElement) | Adds a tab and the content associated to it. |
| AddTab(VisualElement, VisualElement) | Adds a tab and the content associated to it. |
| AddTabToSelection(Int32) | Selects a tab without unselecting others. |
| ApplyPersistenceKey(String) | Use a persistence key to remember user selection of tabs. The selection is stored in SessionState. |
| GetTabContent(Int32) | Gets the tab content at the specified index. |
| GetTabTitleElement(Int32) | Gets the tab title element at the specified index. |
| RemoveTabFromSelection(Int32) | Unselects a tab. |
| SetSelectedTab(Int32) | Sets a single selected tab. |
Events
| onTabSelectionChange | Event triggered when a tab's selection changed. Receives the tab's index and a bool indicating whether it's selected. |