UXML 元素 Tab

Tab 元素代表 TabView 中的单个选项卡。在窗口或菜单中，您可以使用选项卡来对相关内容进行分组。

使选项卡可关闭

要使选项卡可关闭，请将 closable 属性设置为 true。当选项卡可关闭时，选项卡上会显示一个关闭图标。如果用户选择关闭图标，则选项卡会关闭。

向选项卡添加图标

您可以向选项卡添加图标以使其更具视觉吸引力。图标可以是项目中存在的图像资产，例如纹理、渲染纹理一种在运行时创建和更新的特殊纹理类型。要使用它们，首先创建一个新的渲染纹理，并指定您的相机之一渲染到其中。然后，您可以像使用常规纹理一样在材质中使用渲染纹理。 更多信息
参见 词汇表、精灵二维图形对象。如果您习惯于使用 3D 工作，则精灵本质上只是标准纹理，但有一些特殊的技术可以结合和管理精灵纹理，以便在开发过程中提高效率和便利性。 更多信息
参见 词汇表 或矢量。有关如何引用图像资产的信息，请参阅 资产游戏中或项目中可以使用的任何媒体或数据。资产可能来自在 Unity 之外创建的文件，例如 3D 模型、音频文件或图像。您也可以在 Unity 中创建一些资产类型，例如动画控制器、音频混合器或渲染纹理。 更多信息
参见 词汇表。

执行以下操作之一以使用 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表 生成器向选项卡添加图标

• 从选项卡的 检查器一个 Unity 窗口，用于显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。 更多信息
  参见 词汇表 面板中，从“图标图像”下拉列表中选择一个图标。
• 将图标从资产窗口拖放到选项卡的检查器面板中的“图标图像”字段。

要使用 UXML 为选项卡添加图标，请将图像源添加到 icon-image 属性中

<ui:Tab name="Tab" text="Tab text" icon-image="/path/to/image-file.png" />

要使用 C# 为选项卡添加图标，请将图像源分配给 iconImage 属性

Tab myTab = new Tab();
var TabIconImage = Resources.Load<Texture2D>("image-file");

myTab.text = "Tab text";
myTab.iconImage = TabIconImage;

示例

以下 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# 类：Tab
命名空间：UnityEngine.UIElements
基类：VisualElement

成员 UXML 属性

此元素具有以下成员属性

继承的 UXML 属性

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

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

USS 类

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

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

其他资源

• UXML 元素 TabView