フォールドアウト

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

Foldout の作成

Foldout には以下の要素があります。

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

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

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

<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> インターフェースを通じて Foldout の値にアクセスすることができます。

例

以下の 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 属性

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

継承された UXML 属性

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

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

USS クラス

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

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

追加リソース

• Change イベント
• Toggle