TabView 要素内の複数のタブ要素をグループ化して、タブベースのナビゲーションシステムを作成できます。
UI Builder、UXML、または C# で TabView を作成できます。
C# で TabView を作成するには、TabView オブジェクトの新しいインスタンスを作成し、それにタブ要素を追加します。 例:
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);
TabView でタブを並べ替え可能にするには、reorderable プロパティを true に設定します。
エディター UI で TabView のタブ順序を維持するには、TabView とその配置されているタブ要素の両方に一意の view-data-key を割り当てます。view-data-key はタブの状態を保存します。view-data-key を空のままにした場合、ドキュメントが再ロードされてもタブの状態は維持されません。詳細については、ビューデータの永続性を参照してください。
以下の 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 Toolkit > Samples の順に移動します。
その他の例については以下を参照してください。
C# クラス: TabView
名前空間: UnityEngine.UIElements
基本クラス: VisualElement
この要素は以下のメンバー属性を持ちます。
| 名前 | 型 | 説明 |
|---|---|---|
reorderable |
boolean |
タブにドラッグサポートを追加するプロパティ。 デフォルト値は false です。この値を true に設定すると、ユーザーはタブビューでタブを並べ替えることができます。 |
この要素は基本クラスから以下の属性を継承します。
| 名前 | 型 | 説明 |
|---|---|---|
focusable |
boolean |
要素がフォーカス可能である場合は true。 |
tabindex |
int |
フォーカスリング内のフォーカス可能な要素をソートするために使用される整数。0 以上の値に設定する必要があります。 |
この要素は VisualElement から以下の属性も継承します。
| 名前 | 型 | 説明 |
|---|---|---|
content-container |
string |
子要素が追加されますが、通常は子要素は要素自体と同じです。 |
data-source |
Object |
この VisualElement にデータソースを割り当て、継承されたデータソースをオーバーライドします。 |
| このデータソースはすべての子に継承されます。 | ||
data-source-path |
string |
データソースから値へのパス。 |
data-source-type |
System.Type |
この VisualElement に割り当て可能なデータソースのタイプ。 この情報は、設計時に有効なデータソースを指定できない場合に、データソースパスフィールドを補完するヒントとして UI Builder でのみ使用されます。 |
language-direction |
UIElements.LanguageDirection |
要素のテキストの向きを示します。値は要素の子に伝播されます。 languageDirection を RTL に設定すると、テキストの反転と改行/折り返しの適切な処理による、右から左へ (RTL) の基本サポートが追加されます。ただし、包括的な RTL サポートは提供されません。これには、文字の並べ替えを含むテキストシェーピングと OpenType フォント機能のサポートが必要になるためです。将来のアップデートでは、言語、スクリプト、フォント機能の仕様を処理するための追加の API を含む、包括的な RTL サポートが予定されています。 このプロパティの RTL 機能を拡張するには、Unity Asset Store で入手可能なサードパーティ製のプラグインを探し、 ITextElementExperimentalFeatures.renderedText を利用してください。 |
name |
string |
この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。 |
picking-mode |
UIElements.PickingMode |
mouseEvent または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。 |
style |
string |
VisualElement スタイルの値を設定します。 |
tooltip |
string |
ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。 |
usage-hints |
UIElements.UsageHints |
VisualElement の意図されている使用パターンの概要を指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切な UsageHints を指定することを考慮するようお勧めしますが、特定の条件下 (例: ターゲットプラットフォームのハードウェア制限) では、一部の UsageHints が内部的に無視される可能性があることに留意してください。 |
view-data-key |
string |
ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。 このキーは、ビューデータストアからビューデータを保存およびロードするために使用されます。このキーを設定しないと、関連する VisualElement の永続性が無効になります。詳細については、ビューデータの永続性を参照してください。 |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
| C# プロパティ | USS セレクター | 説明 |
|---|---|---|
ussClassName |
.unity-tab-view |
この型の要素の USS クラス名。 |
contentContainerUssClassName |
.unity-tab-view__content-container |
この型のコンテンツコンテナの USS クラス名。 |
reorderableUssClassName |
.unity-tab-view__reorderable |
並べ替え可能なタブビューの USS クラス名。 |
verticalUssClassName |
.unity-tab-view__vertical |
垂直タブビューの USS クラス名。 |
disabledUssClassName |
.unity-disabled |
ローカルで無効に設定されている要素の USS クラス名。 |
Inspector または UI Toolkit Debugger の Matching Selectors セクション を使用して、階層のすべてのレベルで VisualElement のコンポーネントに影響する USS セレクターを確認することもできます。