Version: 2023.2
言語: 日本語
UXML 要素 FloatField
UXML要素 GradientField

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 は、すべての FoldoutToggle サブ要素のチェックマークを表す VisualElement にこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての折りたたみコンテナに影響します。
textUssClassName .unity-foldout__text Foldout 内の Label 要素の USS クラス名です。

Unity はこの USS クラスをすべての FoldoutToggle サブ要素の Label に加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下に位置するすべての foldout コンテナに影響します。
disabledUssClassName .unity-disabled ローカルで無効にされた要素の USS クラス名。

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

その他の参考資料

UXML 要素 FloatField
UXML要素 GradientField