Tab

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

使 Tab 可关闭

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

将图标添加到 Tab

您可以向 Tab 添加图标，使其更具视觉吸引力。图标可以是项目中存在的图像资源，例如纹理、渲染纹理、精灵或矢量。有关如何引用图像资源的信息，请参阅资源。

执行以下操作之一可使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 将图标添加到 Tab：

• 转到 Tab 的 Inspector 面板，从 Icon Image 下拉列表中选择图标。
• 将图标从 Assets 窗口拖动到 Tab 的 Inspector 面板中的 Icon Image 字段。

要使用 UXML 为 Tab 添加图标，请将图像源添加到 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 示例将使用 Tab 创建 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 及其 Tab 的一些可自定义功能：

/// <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 工具包 (UI Toolkit) > 示例 (Samples)。

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

-创建选项卡式菜单。

C# 基类和命名空间

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

成员 UXML 属性

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

继承 UXML 属性

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

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

USS 类

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

还可以使用检视器中的匹配选择器 (Matching Selectors) 部分或 UI 工具包调试器来查看哪些 USS 选择器在其层级视图的每个级别上影响 VisualElement 的组件。

其他资源

• TabView