UXML element Tab

A Tab element represents a single tab within a TabView. In a window or menu, you can use a tab to group related content.

Make a Tab closable

To make it so a Tab can be closed, set the closable property to true. When a Tab is closable, a close icon appears on the Tab. If a user selects the close icon, the Tab closes.

Add an icon to a Tab

You can add an icon to your Tab to make it more visually appealing. Icons can be image assets that exist in your project such as a Texture, Render Texture, Sprite, or Vector. For information on how to reference an image asset, refer to Assets.

Do one of the following to add an icon to a Tab with UI Builder:

From the Tab’s Inspector panel, select an icon from the Icon Image dropdown list.
Drag an icon from the Assets window to the Icon Image field located in the Tab’s Inspector panel.

To add an icon for a Tab with UXML, add the source of the image to the icon-image attribute:

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

To add an icon for a Tab with C#, assign the image source to the iconImage property:

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

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

例

The following UXML example creates a TabView with Tabs:

[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/TabViewSnippet.uxml)]

The following C# example illustrates some of the customizable functionalities of the TabView and its Tabs:

[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/TabViewSnippet.cs#sample)]

To try this example live in Unity, go to Window > UI Toolkit > Samples.

For more examples, refer to the following:

-Create a tabbed menu.

C# の基本クラスと名前空間

C# class: Tab
Namespace: UnityEngine.UIElements
Base class: VisualElement

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

名前	型	説明
`closeable`	`boolean`	A property that adds the ability to close tabs. The default value is `false`. Set this value to `true` to allow the user to close tabs in the tab view.
`icon-image`	`Object`	Sets the icon for the Tab’s header.
`label`	`string`	Sets the label of the Tab’s header.

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

名前	型	説明
`focusable`	`boolean`	要素がフォーカス可能である場合は true。
`tabindex`	`int`	フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。

この要素は、VisualElement から以下の属性も継承します。

名前	型	説明
`content-container`	`string`	子要素はそれに追加されますが、通常は要素自体と同じです。
`data-source`	`Object`	Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children.
`data-source-path`	`string`	Path from the data source to the value.
`name`	`string`	この VisualElement の名前。このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
`picking-mode`	`UIElements.PickingMode`	mouseEvents または `IPanel.Pick` クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
`style`	`string`	この要素のスタイルオブジェクトへの参照。 C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
`toolbar`	`string`	ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
`usage-hints`	`UIElements.UsageHints`	`VisualElement` の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、`VisualElement` がまだ `Panel` の一部でない場合にのみ設定できます。`Panel` の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な `UsageHints` を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切な`UsageHints` を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの `UsageHints` が内部的に無視される可能性があることに留意してください。
`view-data-key`	`string`	Used for view data persistence, such as tree expanded states, scroll position, or zoom level. This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated `VisualElement`. For more information, refer to View data persistence.

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

C# プロパティ	USS セレクター	説明
`ussClassName`	`.unity-tab`	この型の要素の USS クラス名。
`tabHeaderUssClassName`	`.unity-tab__header`	USS class name for the header of this type.
`tabHeaderImageUssClassName`	`.unity-tab__header-image`	USS class name for the icon inside the header.
`tabHeaderEmptyImageUssClassName`	`.unity-tab__header-image--empty`	USS class name for the icon inside the header when the value is null.
`tabHeaderStandaloneImageUssClassName`	`.unity-tab__header-image--standalone`	USS class name for the icon inside the header when the label is empty or null.
`tabHeaderLabelUssClassName`	`.unity-tab__header-label`	USS class name for the label of the header.
`tabHeaderEmptyLabeUssClassName`	`.unity-tab__header-label--empty`	USS class name for the label of the header when the value is empty or null.
`tabHeaderUnderlineUssClassName`	`.unity-tab__header-underline`	USS class name for the active state underline of the header.
`contentUssClassName`	`.unity-tab__content-container`	この型のコンテナ要素の USS クラス名。
`draggingUssClassName`	`.unity-tab--dragging`	USS class name for the dragging state of this type.
`reorderableUssClassName`	`.unity-tab__reorderable`	USS class name for reorderable tab elements.
`reorderableItemHandleUssClassName`	`.unity-tab__reorderable-handle`	USS class name for drag handle in reorderable tabs.
`reorderableItemHandleBarUssClassName`	`.unity-tab__reorderable-handle-bar`	USS class name for drag handlebar in reorderable tabs.
`closeableUssClassName`	`.unity-tab__header__closeable`	The USS class name for a closeable tab.
`closeButtonUssClassName`	`.unity-tab__close-button`	The USS class name for close button in closable tabs.
`disabledUssClassName`	`.unity-disabled`	ローカルで無効にされた要素の USS クラス名。

また、Inspector や UI Toolkit Debugger の Matching Selectors セクションを使用して、どの USS セレクターが VisualElementのコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。

その他の参考資料

UXML element TabView

UXML 要素 SliderInt

UXML element TabView