标签

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

使选项卡可关闭

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

向选项卡添加图标

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

执行下列作之一，使用 UI Builder 将图标添加到选项卡：

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

要为带有 UXL 的选项卡添加图标，请将图像的源添加到icon-image属性：

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

若要使用 C# 为 Tab 添加图标，请将图像源分配给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 中实时试用此示例，请转到 Window > UI 工具包>示例。

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

-创建选项卡式菜单。

C# 基类和命名空间

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

成员 UXML 属性

此元素具有以下成员属性：

继承的UXML属性

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

此元素还继承了以下属性VisualElement:

USS 级

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

您还可以使用 Inspector 或 UI Toolkit Debugger 中的 Matching Selectors 部分来查看哪些 USS 选择器会影响VisualElement在其层次结构的各个层面。

其他资源

• 选项卡视图