ToggleButtonGroup

ToggleButtonGroup を使用して、Button 要素の論理グループから 1 つまたは複数を選択できるようにします。ToggleButtonGroup は、1 つのラベルと、相互作用可能なボタン要素のセットで構成されます。

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

ToggleButtonGroup の作成

ToggleButtonGroup は、UI Builder、UXML、C# で作成できます。

UI Builder

UI Builder で ToggleButtonGroup を作成するには、以下を行います。

1. ToggleButtonGroup を Library パネルから Hierarchy パネルにドラッグします。
2. Button 要素のセットを子要素として ToggleButtonGroup 要素に追加します。

UXML で ToggleButtonGroup を作成するには、UXML ドキュメントに ToggleButtonGroup 要素を追加し、Button 要素のセットを子要素として追加します。 例:

C#

C# で ToggleButtonGroup を作成するには、ToggleButtonGroup オブジェクトの新しいインスタンスを作成し、Button のセットを追加します。 例:

ToggleButtonGroup myElement = new ToggleButtonGroup("Label text");
myElement.Add(new Button("Button 1"));
myElement.Add(new Button("Button 2"));
myElement.Add(new Button("Button 3"));

デフォルトでは、一度に 1 つのボタンを選択できます。複数選択を有効にするには、is-multiple-selection を true に設定します。

空の選択を有効にするには、allow-empty-selection を true に設定します。

例

以下の UXML の例では、ボタンを含む ToggleButtonGroup を作成します。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ToggleButtonGroup label="UXML Toggle Button Group">
        <Button text="A"/>
        <Button text="B"/>
        <Button text="C"/>
        <Button text="D"/>
        <Button text="E"/>
    </ToggleButtonGroup>
</UXML>

以下の C# の例は、ToggleButtonGroup とそのボタンのカスタマイズ可能な機能の一部を示しています。

/// <sample>
// Create custom buttons with Text value only.
var csharpToggleButtonGroupWithButtonTextOnly = new ToggleButtonGroup("C# Toggle Button Group Buttons with Text");
csharpToggleButtonGroupWithButtonTextOnly.Add(new Button() { text = "one", tooltip = "custom button one" });
csharpToggleButtonGroupWithButtonTextOnly.Add(new Button() { text = "two", tooltip = "custom button two" });
container.Add(csharpToggleButtonGroupWithButtonTextOnly);

// Create custom buttons with IconImage value only.
var csharpToggleButtonGroupWithButtonIconOnly = new ToggleButtonGroup("C# Toggle Button Group Buttons with Icons");
csharpToggleButtonGroupWithButtonIconOnly.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PlayButton"), tooltip = "Play" });
csharpToggleButtonGroupWithButtonIconOnly.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PauseButton"), tooltip = "Pause" });
csharpToggleButtonGroupWithButtonIconOnly.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_StepButton"), tooltip = "Step" });
container.Add(csharpToggleButtonGroupWithButtonIconOnly);

// Create custom buttons with IconImage and Text.
var csharpToggleButtonGroupWithButtonIconAndText = new ToggleButtonGroup("C# Toggle Button Group Buttons with Icons and Text");
csharpToggleButtonGroupWithButtonIconAndText.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PlayButton"), text = "Play", tooltip = "Play" });
csharpToggleButtonGroupWithButtonIconAndText.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PauseButton"), text = "Pause", tooltip = "Pause" });
csharpToggleButtonGroupWithButtonIconAndText.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_StepButton"), text = "Step", tooltip = "Step" });
container.Add(csharpToggleButtonGroupWithButtonIconAndText);

// Create custom buttons with IconImage, Text and AllowEmptySelection.
var csharpToggleButtonGroupSingleSelectionAndAllowEmptySelection = new ToggleButtonGroup("C# Toggle Button Group Buttons with Allow Empty Selection") { allowEmptySelection = true };
csharpToggleButtonGroupSingleSelectionAndAllowEmptySelection.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PlayButton"), text = "Play", tooltip = "Play" });
csharpToggleButtonGroupSingleSelectionAndAllowEmptySelection.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_PauseButton"), text = "Pause", tooltip = "Pause" });
csharpToggleButtonGroupSingleSelectionAndAllowEmptySelection.Add(new Button() { iconImage = EditorGUIUtility.FindTexture("d_StepButton"), text = "Step", tooltip = "Step" });
container.Add(csharpToggleButtonGroupSingleSelectionAndAllowEmptySelection);

// Create a ToggleButtonGroup that allows multiple active selections.
var csharpToggleButtonGroupAllowMultiSelect = new ToggleButtonGroup("C# Toggle Button Group with Multiple Selection Enabled") { isMultipleSelection = true };
csharpToggleButtonGroupAllowMultiSelect.Add(new Button() { text = "X", tooltip = "tooltip text for X" });
csharpToggleButtonGroupAllowMultiSelect.Add(new Button() { text = "Y", tooltip = "tooltip text for Y" });
csharpToggleButtonGroupAllowMultiSelect.Add(new Button() { text = "Z", tooltip = "tooltip text for Z" });
container.Add(csharpToggleButtonGroupAllowMultiSelect);

// Create a ToggleButtonGroup that allows multiple active selections and allow empty selection.
var csharpToggleButtonGroupAllowMultiSelectWithAllowEmptySelection = new ToggleButtonGroup("C# Toggle Button Group with Multiple Selection and Allow Empty Selection") { isMultipleSelection = true, allowEmptySelection = true };
csharpToggleButtonGroupAllowMultiSelectWithAllowEmptySelection.Add(new Button() { text = "X", tooltip = "tooltip text for X" });
csharpToggleButtonGroupAllowMultiSelectWithAllowEmptySelection.Add(new Button() { text = "Y", tooltip = "tooltip text for Y" });
csharpToggleButtonGroupAllowMultiSelectWithAllowEmptySelection.Add(new Button() { text = "Z", tooltip = "tooltip text for Z" });
container.Add(csharpToggleButtonGroupAllowMultiSelectWithAllowEmptySelection);

// Create ToggleButtonGroup with a custom class that sets the text's font style to Bold.
var csharpToggleButtonGroupWithCustomClass = new ToggleButtonGroup("C# Toggle Button Group with a Custom Class");
csharpToggleButtonGroupWithCustomClass.AddToClassList("my-custom-style");
csharpToggleButtonGroupWithCustomClass.Add(new Button() { text = "Button A", tooltip = "Bolded font Button A" });
csharpToggleButtonGroupWithCustomClass.Add(new Button() { text = "Button B", tooltip = "Bolded font Button B" });
container.Add(csharpToggleButtonGroupWithCustomClass);
/// </sample>

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

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

C# クラス: ToggleButtonGroup
名前空間: UnityEngine.UIElements
基本クラス: BaseField_1

メンバー UXML 属性

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

継承された UXML 属性

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

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

USS クラス

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

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

追加リソース

• ボタン