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 属性

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

継承された UXML 属性

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

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

USS クラス

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

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

その他の参考資料

• Change イベント
• UXML 要素 Toggle