UXML 要素 Foldout

Foldout は UI の折りたたみ可能なセクションです。Foldout のヘッダーをクリックすると、その中に含まれる要素を表示したり隠したりします。

Foldout の作成

Foldout は以下の要素を持ちます。

Label: Foldout の名前に使用するラベル。
Toggle: トグルをクリックすると、コンテナのサブ要素を展開または折りたたむことができます。デフォルトのチェックボックスではなく、矢印のように見えるようにスタイル設定されています。コンテナが折りたたまれると、矢印は右を向きます。コンテナが展開されると、矢印は下を向きます。
Container: コンテナには、Foldout をトグルするときに表示または非表示にしたいビジュアル要素が含まれています。

Foldout のコンテナに要素を加えることができ、表示/非表示機能は自動的に機能します。

以下の UI Document は、コンテナ内に 2 つのボタンを持つ Foldout を作成します。2 つのボタンは、Foldout をトグルすると表示/非表示されます。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:Foldout text="Foldout" name="MyFoldout" value="true">
        <ui:Button text="First item" />
        <ui:Button text="Second item" />
    </ui:Foldout>
</ui:UXML>

ユーザーのアクションへの応答

Foldout とその Toggle サブ要素は、Change イベントに応答します。Toggle は、Foldout コンテナを隠したり、表示したりします。

Foldout をブーリアン変数にバインドしたり、INotifyValueChanged<bool> を通じてその値にアクセスしたりすることができます。

例

以下の C# コードスニペットでは、Foldout を作成し、Foldout が展開されているかどうかを確認します。

// Create a new foldout, add two elements to it and add it to the container
var cSharpFoldout = new Foldout {text = "Elements"};
cSharpFoldout.Add(new Label("Indented Label"));
cSharpFoldout.Add(new Slider("Indented Slider", 0, 100));
container.Add(cSharpFoldout);

cSharpFoldout.RegisterValueChangedCallback(e =>
{
    // Check whether the foldout is expanded
    if (cSharpFoldout.value)
    {
        Debug.Log("Foldout is expanded");
    }
    else
    {
        Debug.Log("Foldout is collapsed");
    }
});

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

C# クラス: Foldout
名前空間: UnityEngine.UIElements
基本クラス: BindableElement

メンバー UXML 属性

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

名前	型	説明
`text`	`string`	トグルのラベルのテキストです。
`value`	`boolean`	これは Foldout のトグルの状態です。`Foldout` が開いていてコンテンツが表示されている場合は true、閉じていてコンテンツが隠れている場合は false です。

継承された UXML 属性

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

名前	型	説明
`binding-path`	`string`	バインドされるべきターゲットプロパティのパス。
`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-foldout`	Foldout 要素の USS クラス名。 Unity はこの USS クラスをすべての `Foldout` インスタンスに加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての Foldout に影響します。
`toggleUssClassName`	`.unity-foldout__toggle`	Foldout 要素の Toggle サブ要素の USS クラス名。 Unity はこの USS クラスをすべての `Foldout` 要素の `Toggle` サブ要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての Toggle サブ要素に影響します。
`contentUssClassName`	`.unity-foldout__content`	Foldout 内の content 要素の USS クラス名。 Unity はこの USS クラスを、表示または非表示にする要素を持つ `VisualElement` に加えます。このクラスに適用されるスタイルは、ビジュアルツリー内のスタイルシートの横または下に位置するすべての foldout コンテナに影響します。
`inputUssClassName`	`.unity-foldout__input`	Foldout 内の Label 要素の USS クラス名です。 Unity はこの USS クラスを `Toggle` input 要素を含む `VisualElement` に加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての foldout コンテナに影響します。
`checkmarkUssClassName`	`unity-toggle__checkmark`	Foldout 内の Label 要素の USS クラス名です。 Unity は、すべての `Foldout` の `Toggle` サブ要素のチェックマークを表す `VisualElement` にこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての折りたたみコンテナに影響します。
`textUssClassName`	`.unity-foldout__text`	Foldout 内の Label 要素の USS クラス名です。 Unity はこの USS クラスをすべての `Foldout` の `Toggle` サブ要素の `Label` に加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下に位置するすべての foldout コンテナに影響します。
`disabledUssClassName`	`.unity-disabled`	ローカルで無効にされた要素の USS クラス名。

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

その他の参考資料

UXML 要素 FloatField

UXML要素 GradientField