UXML element TabView

You can group multiple Tab elements within a TabView element to create a tab-based navigation system.

Create a TabView

You can create a TabView with UI Builder, UXML, or C#.

To create a TabView with C#, create a new instance of the TabView object and then add Tab elements to it. For example:

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);

Make tabs reorderable

To make tabs reorderable with a TabView, set the reorderable property to true.

To persist the tab order for a TabView in the Editor UI, assign a unique view-data-key to both the TabView and its contained Tab elements. The view-data-key stores the state of the tabs. If you left the view-data-key empty, the tab state doesn’t persist when the document is reloaded. for more information, refer to View data persistence.

例

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: TabView
Namespace: UnityEngine.UIElements
Base class: VisualElement

メンバー UXML 属性

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

名前	型	説明
reorderable	boolean	A property that adds dragging support to tabs. The default value is false. Set this value to true to allow the user to reorder tabs in the tab view.

継承された 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-view	この型の要素の USS クラス名。
contentContainerUssClassName	.unity-tab-view__content-container	USS class name for the content container of this type.
reorderableUssClassName	.unity-tab-view__reorderable	The USS class name for reorderable tab view.
verticalUssClassName	.unity-tab-view__vertical	The USS class name for vertical tab view.
disabledUssClassName	.unity-disabled	ローカルで無効にされた要素の USS クラス名。

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

その他の参考資料

• UXML element Tab