UXML 元素 TabView

您可以在 TabView 元素中组合多个Tab元素以创建基于选项卡的导航系统。

创建 TabView

您可以使用UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
参见术语表构建器、UXML 或 C# 创建 TabView。

要使用 C# 创建 TabView，请创建 TabView 对象的新实例，然后向其中添加 Tab 元素。例如

var tabView = new TabView("Title text");
var tab1 = new Tab("Tab 1");
var tab2 = new Tab("Tab 2");
var tab3 = new Tab("Tab 3");
tabView.Add(tab1);
tabView.Add(tab2);
tabView.Add(tab3);

使选项卡可重新排序

要使 TabView 中的选项卡可重新排序，请将 reorderable 属性设置为 true。

要在编辑器 UI 中使 TabView 的选项卡顺序保持不变，请为 TabView 及其包含的 Tab 元素分配唯一的 view-data-key。view-data-key 存储选项卡的状态。如果您将 view-data-key 保留为空，则文档重新加载时选项卡状态不会保留。有关更多信息，请参阅视图数据持久性。

示例

以下 UXML 示例创建了一个带有选项卡的 TabView

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <TabView>
       <Tab label="UXML Tab A">
           <Label text="UXML tab: This is some content for the first Tab." />
       </Tab>
       <Tab label="UXML Tab B">
           <Label text="UXML tab: This is some content for the second Tab." />
       </Tab>
    </TabView>
</UXML>

以下 C# 示例说明了 TabView 及其选项卡的一些可自定义功能

/// <sample>
// Create a TabView with Tabs that only contains a label.
var csharpTabViewWithLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabOne = new Tab("One");
tabOne.Add(new Label("Tab with labels only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabOne);
var tabTwo = new Tab("Two");
tabTwo.Add(new Label("Tab with labels only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabTwo);
container.Add(csharpTabViewWithLabels);

// Create a TabView with Tabs that only contains an icon.
var csharpTabViewWithIcons = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabIconConnect = new Tab(EditorGUIUtility.FindTexture("CloudConnect"));
tabIconConnect.Add(new Label("Tab with icons only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconConnect);
var tabIconStore = new Tab(EditorGUIUtility.FindTexture("Asset Store"));
tabIconStore.Add(new Label("Tab with icons only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconStore);
container.Add(csharpTabViewWithIcons);

// Create a TabView with Tabs that only contains an icon and a label.
var csharpTabViewWithIconsAndLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabConnect = new Tab("Connect", EditorGUIUtility.FindTexture("CloudConnect"));
tabConnect.Add(new Label("Tab with an icon and a labels: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabConnect);
var tabStore = new Tab("Store", EditorGUIUtility.FindTexture("Asset Store"));
tabStore.Add(new Label("Tab with an icon and a labels: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabStore);
container.Add(csharpTabViewWithIconsAndLabels);

// Create a TabView that allows re-ordering of the tabs.
var csharpReorderableTabView = new TabView() { reorderable = true, style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var tabA = new Tab("Tab A");
tabA.Add(new Label("Reorderable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabA);
var tabB = new Tab("Tab B");
tabB.Add(new Label("Reorderable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabB);
var tabC = new Tab("Tab C");
tabC.Add(new Label("Reorderable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabC);
container.Add(csharpReorderableTabView);

// Create a TabView with closeable tabs.
var closeTabInfoLabel = new Label($"Last tab closed: None");
void UpdateLabel(string newLabel) => closeTabInfoLabel.text = $"Last tab closed: {newLabel}";
var cSharpCloseableTabs = new TabView() { style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var closeableTabA = new Tab("Title A") { closeable = true };
closeableTabA.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabA.Add(new Label("Closeable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabA);
var closeableTabB = new Tab("Title B") { closeable = true };
closeableTabB.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabB.Add(new Label("Closeable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabB);
var closeableTabC = new Tab("Title C") { closeable = true };
closeableTabC.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabC.Add(new Label("Closeable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabC);
container.Add(cSharpCloseableTabs);
container.Add(closeTabInfoLabel);

// Create a TabView and apply custom styling to specific areas of their tabs.
var csharpCustomStyledTabView = new TabView() { style = { marginTop = 15 }, classList = { "some-styled-class" }}; // marginTop not required, only for demonstration purposes.
var customStyledTabOne = new Tab("One");
customStyledTabOne.Add(new Label("Custom styled tabs: This is some content for the first Tab."));
csharpCustomStyledTabView.Add(customStyledTabOne);
var customStyledTabTwo = new Tab("Two");
customStyledTabTwo.Add(new Label("Custom styled tabs: This is some content for the second Tab."));
csharpCustomStyledTabView.Add(customStyledTabTwo);
container.Add(csharpCustomStyledTabView);
/// </sample>

要在 Unity 中实时尝试此示例，请转到窗口 > UI 工具包 > 示例。

有关更多示例，请参阅以下内容

-创建选项卡菜单。

C# 基类和命名空间

C# 类：TabView
命名空间：UnityEngine.UIElements
基类：VisualElement

成员 UXML 属性

此元素具有以下成员属性

名称	类型	描述
`reorderable`	`布尔值`	一个向选项卡添加拖动支持的属性。默认值为 `false`。将此值设置为 `true` 以允许用户在选项卡视图中重新排序选项卡。

继承的 UXML 属性

此元素从其基类继承以下属性

名称	类型	描述
`focusable`	`布尔值`	如果元素可以聚焦，则为 True。
`tabindex`	`整数`	用于在焦点环中对可聚焦元素进行排序的整数。必须大于或等于零。

此元素还从 VisualElement 继承以下属性

名称	类型	描述
`content-container`	`字符串`	子元素添加到其中，通常与元素本身相同。
`data-source`	`对象`	为该 VisualElement 分配数据源，该数据源覆盖任何继承的数据源。此数据源由所有子级继承。
`data-source-path`	`字符串`	从数据源到值的路径。
`data-source-type`	`System.Type`	可分配给此 VisualElement 的数据源的可能类型。此信息仅供 UI 构建器使用，作为提示，以便在设计时无法指定有效数据源时为数据源路径字段提供一些补全。
`language-direction`	`UIElements.LanguageDirection`	指示元素文本的方向性。该值将传播到元素的子级。将 languageDirection 设置为 RTL 通过反转文本并适当地处理换行和单词换行来为从右到左 (RTL) 添加基本支持。但是，它不提供全面的 RTL 支持，因为这需要文本整形，包括字符的重新排序和 OpenType 字体功能支持。全面的 RTL 支持计划在未来的更新中提供，这将涉及其他 API 来处理语言、脚本和字体功能规范。为了增强此属性的 RTL 功能，用户可以探索 Unity Asset Store 中可用的第三方插件并使用 `ITextElementExperimentalFeatures.renderedText`
`name`	`字符串`	此 VisualElement 的名称。使用此属性编写针对特定元素的 USS 选择器。标准做法是为元素指定唯一的名称。
`picking-mode`	`UIElements.PickingMode`	确定在鼠标事件或 `IPanel.Pick` 查询期间是否可以选择此元素。
`style`	`字符串`	设置 `VisualElement` 样式值。
`tooltip`	`字符串`	在用户将鼠标悬停在元素上一段时间后，在信息框内显示的文本。这仅在编辑器 UI 中受支持。
`usage-hints`	`UIElements.UsageHints`	指定 `VisualElement` 高级预期使用模式的提示值的组合。仅当 `VisualElement` 尚未成为 `Panel` 的一部分时，才能设置此属性。一旦成为 `Panel` 的一部分，此属性实际上就成为只读的，尝试更改它将引发异常。正确 `UsageHints` 的规范驱动系统根据预期的使用模式做出更好的决策，以处理或加速某些操作。请注意，这些提示不会影响行为或视觉结果，而只会影响面板和其中元素的整体性能。建议始终考虑指定正确的 `UsageHints`，但请记住，在某些情况下，某些 `UsageHints` 可能会在内部被忽略（例如，由于目标平台上的硬件限制）。
`view-data-key`	`字符串`	用于视图数据持久性，例如树展开状态、滚动位置或缩放级别。此键用于从视图数据存储中保存和加载视图数据。如果您不设置此键，则关联的 `VisualElement` 将禁用持久性。有关更多信息，请参阅视图数据持久性。

USS 类

下表列出了所有 C# 公共属性名称及其相关的 USS 选择器。

C# 属性	USS 选择器	描述
`ussClassName`	`.unity-tab-view`	此类型元素的 USS 类名。
`contentContainerUssClassName`	`.unity-tab-view__content-container`	此类型的容器的 USS 类名。
`reorderableUssClassName`	`.unity-tab-view__reorderable`	可重新排序选项卡视图的 USS 类名。
`verticalUssClassName`	`.unity-tab-view__vertical`	垂直选项卡视图的 USS 类名。
`disabledUssClassName`	`.unity-disabled`	本地禁用元素的 USS 类名。

您还可以使用检查器或 UI 工具包调试器中的匹配选择器部分查看哪些 USS 选择器影响其层次结构中每个级别的 VisualElement 的组件。

其他资源

UXML 元素 Tab

UXML 元素 Tab

UXML 元素 TagField

Unity 手册

UXML 元素 TabView

创建 TabView

使选项卡可重新排序

示例

C# 基类和命名空间

成员 UXML 属性

继承的 UXML 属性

USS 类

其他资源