トグル

トグルには画像とラベルが含まれます。ボタン などの他の標準 UI Toolkit コントロールと同様、トグルにはクリック可能なマニピュレーターが設定されており、MouseUpEvent と PointerUpEvent が登録されています。これらのイベントのいずれかがマニピュレーターをトリガーすると、トグルの値は、true から false、または false から true に変化します。トグルの現在の値の読み取りまたは設定ができます。トグルを Boolean 変数にバインドすることもできます。

ドロップダウンからの選択や有効なオプションなど、他の条件に基づいて要素の表示/非表示を設定できます。条件付き UI の例として、Camera Inspector があります。Camera Inspector では、Physical Camera モードを有効にすると追加のオプションが表示されます。

ノート: 要素を Inspector ウィンドウの他のフィールドと揃えるには、.unity-base-field__aligned USS クラスを適用します。詳細については、BaseField を参照してください。

トグルの作成

トグルは、UI Builder、UXML、C# で作成できます。

以下の C# の例では、特定のラベルで トグル を作成します。

Toggle myToggle = new Toggle("Click me");

Toggle のスタイル

デフォルトでは、トグルコントロールはチェックボックスとして表示されます。スタイルを適用して、一般的なトグルのような外観にすることができます。

トグルのチェックボックスのスタイルを設定するには、.unity-toggle__input と .unity-toggle__checkmark のスタイルプロパティーを使用します。例えば、className という名前のクラスをトグルに適用したとします。以下の USS は、トグルを選択または解除したときにチェックボックスの背景画像を変更します。

/* Set the background image when the checkbox is selected. */
.className:checked > .unity-toggle__input > .unity-toggle__checkmark {
    background-image: url("path/to/image-file");
}

/* Set the background image When the checkbox is not selected. */
.className > .unity-toggle__input > .unity-toggle__checkmark {
    background-image: url("path/to/image-file"); 
}

例

以下は UXML でトグルを作成する例です。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Toggle label="UXML Field" name="the-uxml-field" />
</UXML>

以下の C# の例は、トグルのカスタマイズ可能な機能の一部を示しています。

/// <sample>
// Get a reference to the field from UXML and assign a value to it.
var uxmlField = container.Q<Toggle>("the-uxml-field");
uxmlField.value = true;

// Create a new field, disable it, and give it a style class.
var csharpField = new Toggle("C# Field");
csharpField.value = false;
csharpField.SetEnabled(false);
csharpField.AddToClassList("some-styled-field");
csharpField.value = uxmlField.value;
container.Add(csharpField);

// Mirror the value of the UXML field into the C# field.
uxmlField.RegisterCallback<ChangeEvent<bool>>((evt) =>
{
    csharpField.value = evt.newValue;
});
/// </sample>

この例を Unity でライブ体験するには、Window > UI Toolkit > Samples の順に移動します。

その他の例は以下を参照してください。

• トグルを使って条件付き UI を作成する

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

C# クラス: Toggle
名前空間: UnityEngine.UIElements
基本クラス: BaseBoolField

継承された UXML 属性

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

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

USS クラス

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

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

追加リソース

• Foldout
• 疑似クラス