UXML 要素 Toggle

C# class: Toggle
Namespace: UnityEngine.UIElements
Base class: BaseBoolField

属性

The following table lists all the supported attributes.

Create a Toggle

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

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

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

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

Toggle は Change イベント に応答します。

Style the Toggle

To see which USS selectors affect the components of the Toggle at every level of its hierarchy, use the Matching Selectors section in the Inspector or the UI Toolkit Debugger.

例

簡単な Toggle の例を見るには、Unity で Window > UI Toolkit > Samples > Toggle を選択してください。

The following example uses a Toggle to create a conditional UI. The example creates a custom Editor window with two toggles. You can use the toggles to do the following:

• ラベルの表示/非表示
• ボタンの有効化/無効化

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

サンプルを作成するには以下を行います。

1. 任意のテンプレートで Unity プロジェクトを作成します。

2. Project ウィンドウに、Editor という名前のフォルダーを作成します。

3. Editor フォルダーに、以下のコンテンツを含む ToggleExample という C# ファイルを作成します。

   using UnityEngine;
   using UnityEditor;
   using UnityEngine.UIElements;
   namespace Samples.Editor.Controls
   {
       public class ToggleExample : EditorWindow
       {
           private Toggle showToggle;
           private Toggle activateToggle;
           private Label labelToShow;
           private Button buttonToActivate;
           [MenuItem("Window/ToggleExample")]
           public static void OpenWindow()
           {
               var window = GetWindow<ToggleExample>("Controls: Toggle Sample");
               window.minSize = new Vector2(200, 170);
               EditorGUIUtility.PingObject(MonoScript.FromScriptableObject(window));
           }
           public void OnEnable()
           {
               showToggle = new Toggle("Show label")
               {
                   value = true
               };
               activateToggle = new Toggle("Active button")
               {
                   value = true
               };
               labelToShow = new Label("This label is shown when the above toggle is set to On");
               buttonToActivate = new Button(() => Debug.Log("Button pressed!"))
               {
                   text = "Active if above toggle is On"
               };
               rootVisualElement.Add(showToggle);
               rootVisualElement.Add(labelToShow);
               rootVisualElement.Add(activateToggle);
               rootVisualElement.Add(buttonToActivate);
               showToggle.RegisterValueChangedCallback(evt => labelToShow.visible = evt.newValue);
               activateToggle.RegisterValueChangedCallback(evt => buttonToActivate.SetEnabled(evt.newValue));
           }
       }
   }
   

4. 例を試すには、メニューから Window > ToggleExample を選択してください。

その他の参考資料

• スライドトグルカスタムコントロールの作成
• UXML element Foldout