Dropdown 샘플코드 갱신. Tab align 기능 추가

Assets/Sample/UIToolkit/UTKStyleGuideSample.Input.cs

@@ -449,12 +449,15 @@ var dropdown = new UTKDropdown(""Select Option"");
 dropdown.SetOptions(new List<string> { ""Option 1"", ""Option 2"", ""Option 3"", ""Option 4"" });
 dropdown.SelectedIndex = 0;
 
-// 선택 이벤트
-dropdown.OnSelectionChanged += (index) =>
+// 선택 이벤트 (인덱스와 값 모두 전달)
+dropdown.OnSelectionChanged += (index, value) =>
 {
-    Debug.Log($""선택된 인덱스: {index}"");
+    Debug.Log($""선택: [{index}] {value}"");
 };
 
+// 생성자로 한 번에 설정
+var sortDropdown = new UTKDropdown(""정렬"", new List<string> { ""이름"", ""날짜"", ""크기"" });
+
 // 선택된 값 가져오기
 var selectedIndex = dropdown.SelectedIndex;
 var selectedValue = dropdown.SelectedValue;
@@ -462,22 +465,42 @@ var selectedValue = dropdown.SelectedValue;
 // 옵션 동적 변경
 dropdown.SetOptions(new List<string> { ""New 1"", ""New 2"", ""New 3"" });
 
-// 프로그램으로 선택
+// 프로그램으로 선택 (인덱스로)
 dropdown.SelectedIndex = 2;
 
+// 프로그램으로 선택 (값으로)
+dropdown.SetSelectedValue(""Option 2"");
+
+// 이벤트 없이 값 변경 (초기화 시 유용)
+sortDropdown.SetSelectedValue(""크기"", notify: false);
+
+// 동적으로 옵션 추가
+dropdown.AddOption(""Option 5"");
+
 // Disabled
 var disabledDropdown = new UTKDropdown(""Disabled"");
 disabledDropdown.SetOptions(new List<string> { ""Option 1"", ""Option 2"" });
 disabledDropdown.SelectedIndex = 0;
 disabledDropdown.IsEnabled = false;",
-            uxmlCode: @"<!-- UTKDropdown은 동적 생성 권장 -->
-<!-- C# 코드에서 SetOptions로 옵션 설정 -->
+            uxmlCode: @"<!-- 네임스페이스 선언 -->
+<ui:UXML xmlns:utk=""UVC.UIToolkit"">
 
-<!-- 기본 드롭다운 -->
-<utk:UTKDropdown name=""dropdown-1"" text=""Select Option"" />
+<!-- 기본 드롭다운 (쉼표로 구분) -->
+<utk:UTKDropdown label=""정렬"" choices=""이름,날짜,크기"" />
 
-<!-- Disabled -->
-<utk:UTKDropdown name=""dropdown-2"" text=""Disabled"" is-enabled=""false"" />");
+<!-- 기본값 지정 (index로) -->
+<utk:UTKDropdown label=""언어"" choices=""한국어,English,日本語"" index=""0"" />
+
+<!-- 플레이스홀더 사용 -->
+<utk:UTKDropdown label=""국가"" choices=""한국,미국,일본,중국"" placeholder=""국가를 선택하세요"" />
+
+<!-- 비활성화 -->
+<utk:UTKDropdown label=""선택"" choices=""옵션1,옵션2,옵션3"" index=""1"" is-enabled=""false"" />
+
+<!-- C# 코드에서 SetOptions로 동적 설정 권장 -->
+<utk:UTKDropdown name=""dropdown-1"" label=""Select Option"" />
+
+</ui:UXML>");
     }
 
     private enum SampleEnum { Option1, Option2, Option3 }
@@ -494,34 +517,163 @@ disabledDropdown.IsEnabled = false;",
         SetCodeSamples(root,
             csharpCode: @"// Enum 정의
 public enum SampleEnum { Option1, Option2, Option3 }
+public enum Difficulty { Easy, Normal, Hard, Expert }
 
-// 기본 사용법
+// 기본 사용법 (생성자로 label과 기본값 지정)
 var enumField = new UTKEnumDropDown(""Choice"", SampleEnum.Option1);
 
 // 값 변경 이벤트
 enumField.OnValueChanged += (newValue) =>
 {
     Debug.Log($""선택된 값: {newValue}"");
+    // Enum으로 캐스팅하여 사용
+    if (newValue is SampleEnum sample)
+    {
+        Debug.Log($""SampleEnum: {sample}"");
+    }
+};
+
+// 난이도 선택 예시
+var difficultyDropdown = new UTKEnumDropDown(""난이도"", Difficulty.Normal);
+difficultyDropdown.OnValueChanged += (value) =>
+{
+    var difficulty = (Difficulty)value;
+    Debug.Log($""난이도 변경: {difficulty}"");
 };
 
 // 현재 선택된 값 가져오기
 var currentValue = enumField.Value;
+if (currentValue is SampleEnum sample)
+{
+    Debug.Log($""현재 값: {sample}"");
+}
 
 // 프로그램으로 값 변경
 enumField.Value = SampleEnum.Option2;
 
+// 이벤트 없이 값 변경
+enumField.SetValue(SampleEnum.Option3, notify: false);
+
 // Disabled
 enumField.IsEnabled = false;",
-            uxmlCode: @"<!-- UTKEnumDropDown은 동적 생성 권장 -->
-<!-- C# 코드에서 enum 타입과 초기값 지정 -->
+            uxmlCode: @"<!-- 네임스페이스 선언 -->
+<ui:UXML xmlns:utk=""UVC.UIToolkit"">
+
+<!-- UTKEnumDropDown은 동적 생성 권장 -->
+<!-- C# 코드에서 enum 타입과 초기값으로 Init() 호출 필수 -->
 
 <!-- 기본 Enum 드롭다운 -->
 <utk:UTKEnumDropDown name=""enum-dropdown-1"" label=""Choice"" />
 
 <!-- Disabled -->
-<utk:UTKEnumDropDown name=""enum-dropdown-2"" label=""Choice"" is-enabled=""false"" />");
+<utk:UTKEnumDropDown name=""enum-dropdown-2"" label=""Choice"" is-enabled=""false"" />
+
+</ui:UXML>
+
+<!-- C#에서 초기화 예시 -->
+<!-- 
+var enumDropdown = root.Q<UTKEnumDropDown>(""enum-dropdown-1"");
+enumDropdown.Init(SampleEnum.Option1);  // 필수!
+-->");
     }
 
+    private void InitializeMultiSelectDropdownSample(VisualElement root)
+    {
+        var normalRow = root.Q<VisualElement>("multiselect-normal-row");
+        if (normalRow != null)
+        {
+            var dropdown = new UTKMultiSelectDropdown("Select Categories");
+            dropdown.SetOptions(new List<string> { "Category 1", "Category 2", "Category 3", "Category 4", "Category 5" });
+            dropdown.SetSelectedIndices(new List<int> { 0, 2 });
+            normalRow.Add(dropdown);
+        }
+
+        var disabledRow = root.Q<VisualElement>("multiselect-disabled-row");
+        if (disabledRow != null)
+        {
+            var dropdown = new UTKMultiSelectDropdown("Disabled");
+            dropdown.SetOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
+            dropdown.SetSelectedIndices(new List<int> { 0, 1 });
+            dropdown.IsEnabled = false;
+            disabledRow.Add(dropdown);
+        }
+
+        SetCodeSamples(root,
+            csharpCode: @"// 기본 사용법
+var dropdown = new UTKMultiSelectDropdown(""Select Categories"");
+dropdown.SetOptions(new List<string> { ""Category 1"", ""Category 2"", ""Category 3"", ""Category 4"", ""Category 5"" });
+
+// 선택 이벤트 (인덱스 목록과 값 목록 모두 전달)
+dropdown.OnSelectionChanged += (indices, values) =>
+{
+    Debug.Log($""선택된 개수: {values.Count}"");
+    Debug.Log($""선택 항목: {string.Join("", "", values)}"");
+    Debug.Log($""인덱스: [{string.Join("", "", indices)}]"");
+};
+
+// 생성자로 한 번에 설정
+var categoryDropdown = new UTKMultiSelectDropdown(
+    ""카테고리 선택"",
+    new List<string> { ""과일"", ""채소"", ""육류"", ""유제품"" }
+);
+
+// 기본값 설정 (인덱스로)
+categoryDropdown.SetSelectedIndices(new List<int> { 0, 2 });
+
+// 기본값 설정 (값으로)
+categoryDropdown.SetSelectedValues(new List<string> { ""과일"", ""육류"" });
+
+// 이벤트 없이 선택 변경 (초기화 시 유용)
+categoryDropdown.SetSelectedIndices(new List<int> { 1, 3 }, notify: false);
+
+// 선택된 값 가져오기
+var selectedIndices = dropdown.SelectedIndices;
+var selectedValues = dropdown.SelectedValues;
+
+// 전체 선택
+dropdown.SelectAll();
+
+// 전체 해제
+dropdown.ClearSelection();
+
+// 옵션 동적 변경
+dropdown.SetOptions(new List<string> { ""New 1"", ""New 2"", ""New 3"" });
+
+// Disabled
+var disabledDropdown = new UTKMultiSelectDropdown(""Disabled"");
+disabledDropdown.SetOptions(new List<string> { ""Option 1"", ""Option 2"", ""Option 3"" });
+disabledDropdown.SetSelectedIndices(new List<int> { 0, 1 });
+disabledDropdown.IsEnabled = false;",
+            uxmlCode: @"<!-- 네임스페이스 선언 -->
+<ui:UXML xmlns:utk=""UVC.UIToolkit"">
+
+<!-- 기본 다중 선택 드롭다운 (쉼표로 구분) -->
+<utk:UTKMultiSelectDropdown label=""카테고리"" choices=""과일,채소,육류,유제품"" />
+
+<!-- 기본값 지정 (인덱스로) -->
+<utk:UTKMultiSelectDropdown label=""태그"" 
+                             choices=""중요,긴급,검토 필요,완료"" 
+                             selected-indices=""0,1"" />
+
+<!-- 플레이스홀더 사용 -->
+<utk:UTKMultiSelectDropdown label=""필터"" 
+                             choices=""전체,활성,비활성,대기중"" 
+                             placeholder=""필터를 선택하세요"" />
+
+<!-- 비활성화 -->
+<utk:UTKMultiSelectDropdown label=""선택"" 
+                             choices=""옵션1,옵션2,옵션3"" 
+                             selected-indices=""0,2"" 
+                             is-enabled=""false"" />
+
+<!-- C# 코드에서 SetOptions로 동적 설정 권장 -->
+<utk:UTKMultiSelectDropdown name=""multiselect-1"" label=""Select Options"" />
+
+</ui:UXML>");
+    }
+
+    #endregion
+
     #region Slider Initializers
 
     private void InitializeSliderSample(VisualElement root)
@@ -683,6 +835,4 @@ async UniTask LoadDataAsync()
     }
 
     #endregion
-
-    #endregion
 }

Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs

@@ -15,30 +15,96 @@ public partial class UTKStyleGuideSample
 
     private void InitializeTabViewSample(VisualElement root)
     {
-        var tabContainer = root.Q<VisualElement>("tabview-container");
-        if (tabContainer != null)
+        // Top Alignment (기본)
+        var tabContainerTop = root.Q<VisualElement>("tabview-top-container");
+        if (tabContainerTop != null)
         {
             var tabView = new UTKTabView();
-            tabView.style.width = 400;
+            tabView.Align = TabAlign.Top;
+            tabView.style.width = 500;
             tabView.style.height = 200;
 
-            tabView.AddUTKTab("Tab 1", new Label("Content for Tab 1"));
-            tabView.AddUTKTab("Tab 2", new Label("Content for Tab 2"));
-            tabView.AddUTKTab("Tab 3", new Label("Content for Tab 3"));
+            tabView.AddUTKTab("일반", new Label("일반 설정 내용입니다.\n탭이 위쪽에 배치됩니다."));
+            tabView.AddUTKTab("고급", new Label("고급 설정 내용입니다."));
+            tabView.AddUTKTab("정보", new Label("정보 탭 내용입니다."));
 
-            tabContainer.Add(tabView);
+            tabContainerTop.Add(tabView);
+        }
+
+        // Bottom Alignment
+        var tabContainerBottom = root.Q<VisualElement>("tabview-bottom-container");
+        if (tabContainerBottom != null)
+        {
+            var tabView = new UTKTabView();
+            tabView.Align = TabAlign.Bottom;
+            tabView.style.width = 500;
+            tabView.style.height = 200;
+
+            tabView.AddUTKTab("일반", new Label("일반 설정 내용입니다.\n탭이 아래쪽에 배치됩니다."));
+            tabView.AddUTKTab("고급", new Label("고급 설정 내용입니다."));
+            tabView.AddUTKTab("정보", new Label("정보 탭 내용입니다."));
+
+            tabContainerBottom.Add(tabView);
+        }
+
+        // Left Alignment
+        var tabContainerLeft = root.Q<VisualElement>("tabview-left-container");
+        if (tabContainerLeft != null)
+        {
+            var tabView = new UTKTabView();
+            tabView.Align = TabAlign.Left;
+            tabView.style.width = 500;
+            tabView.style.height = 200;
+
+            tabView.AddUTKTab("일반", new Label("일반 설정 내용입니다.\n탭이 왼쪽에 세로로 배치됩니다."));
+            tabView.AddUTKTab("고급", new Label("고급 설정 내용입니다."));
+            tabView.AddUTKTab("정보", new Label("정보 탭 내용입니다."));
+
+            tabContainerLeft.Add(tabView);
+        }
+
+        // Right Alignment
+        var tabContainerRight = root.Q<VisualElement>("tabview-right-container");
+        if (tabContainerRight != null)
+        {
+            var tabView = new UTKTabView();
+            tabView.Align = TabAlign.Right;
+            tabView.style.width = 500;
+            tabView.style.height = 200;
+
+            tabView.AddUTKTab("일반", new Label("일반 설정 내용입니다.\n탭이 오른쪽에 세로로 배치됩니다."));
+            tabView.AddUTKTab("고급", new Label("고급 설정 내용입니다."));
+            tabView.AddUTKTab("정보", new Label("정보 탭 내용입니다."));
+
+            tabContainerRight.Add(tabView);
         }
 
         SetCodeSamples(root,
-            csharpCode: @"// 기본 사용법
+            csharpCode: @"// 기본 사용법 (Top Alignment)
 var tabView = new UTKTabView();
-tabView.style.width = 400;
+tabView.Align = TabAlign.Top;  // 기본값
+tabView.style.width = 500;
 tabView.style.height = 200;
 
 // 탭 추가
-tabView.AddUTKTab(""Tab 1"", new Label(""Content for Tab 1""));
-tabView.AddUTKTab(""Tab 2"", new Label(""Content for Tab 2""));
-tabView.AddUTKTab(""Tab 3"", new Label(""Content for Tab 3""));
+tabView.AddUTKTab(""일반"", new Label(""일반 설정 내용""));
+tabView.AddUTKTab(""고급"", new Label(""고급 설정 내용""));
+tabView.AddUTKTab(""정보"", new Label(""정보 탭 내용""));
+
+// Bottom Alignment - 탭이 아래쪽에 배치
+var tabViewBottom = new UTKTabView();
+tabViewBottom.Align = TabAlign.Bottom;
+tabViewBottom.AddUTKTab(""Tab 1"", new Label(""Content 1""));
+
+// Left Alignment - 탭이 왼쪽에 세로로 배치
+var tabViewLeft = new UTKTabView();
+tabViewLeft.Align = TabAlign.Left;
+tabViewLeft.AddUTKTab(""Tab 1"", new Label(""Content 1""));
+
+// Right Alignment - 탭이 오른쪽에 세로로 배치
+var tabViewRight = new UTKTabView();
+tabViewRight.Align = TabAlign.Right;
+tabViewRight.AddUTKTab(""Tab 1"", new Label(""Content 1""));
 
 // 복잡한 콘텐츠 추가
 var contentContainer = new VisualElement();
@@ -46,22 +112,64 @@ contentContainer.Add(new Label(""복잡한 콘텐츠""));
 contentContainer.Add(new UTKButton(""버튼""));
 tabView.AddUTKTab(""Tab 4"", contentContainer);
 
-// 탭 선택 이벤트
-tabView.OnTabChanged += (index) =>
+// 탭 변경 이벤트
+tabView.OnTabChanged += (index, tab) =>
 {
     Debug.Log($""선택된 탭 인덱스: {index}"");
 };
 
 // 프로그램으로 탭 선택
-tabView.SelectTab(1); // 두 번째 탭 선택
+tabView.SelectedIndex = 1; // 두 번째 탭 선택
 
 // 현재 선택된 탭 인덱스
-var currentTab = tabView.SelectedTabIndex;",
-            uxmlCode: @"<!-- UTKTabView는 동적 생성 권장 -->
-<!-- C# 코드에서 AddUTKTab으로 탭 추가 -->
+var currentTab = tabView.SelectedIndex;",
+            uxmlCode: @"<!-- 네임스페이스 선언 -->
+<ui:UXML xmlns:utk=""UVC.UIToolkit"">
 
-<!-- 기본 TabView -->
-<utk:UTKTabView name=""tab-view-1"" style=""width: 400px; height: 200px;"" />");
+<!-- Top Alignment (기본값) -->
+<utk:UTKTabView align=""Top"" style=""width: 500px; height: 200px;"">
+    <utk:UTKTab label=""일반"">
+        <ui:Label text=""일반 설정 내용"" />
+    </utk:UTKTab>
+    <utk:UTKTab label=""고급"">
+        <ui:Label text=""고급 설정 내용"" />
+    </utk:UTKTab>
+</utk:UTKTabView>
+
+<!-- Bottom Alignment - 탭이 아래쪽 -->
+<utk:UTKTabView align=""Bottom"" style=""width: 500px; height: 200px;"">
+    <utk:UTKTab label=""Tab 1"">
+        <ui:Label text=""Content 1"" />
+    </utk:UTKTab>
+    <utk:UTKTab label=""Tab 2"">
+        <ui:Label text=""Content 2"" />
+    </utk:UTKTab>
+</utk:UTKTabView>
+
+<!-- Left Alignment - 탭이 왼쪽 (세로) -->
+<utk:UTKTabView align=""Left"" style=""width: 500px; height: 200px;"">
+    <utk:UTKTab label=""Tab 1"">
+        <ui:Label text=""Content 1"" />
+    </utk:UTKTab>
+    <utk:UTKTab label=""Tab 2"">
+        <ui:Label text=""Content 2"" />
+    </utk:UTKTab>
+</utk:UTKTabView>
+
+<!-- Right Alignment - 탭이 오른쪽 (세로) -->
+<utk:UTKTabView align=""Right"" style=""width: 500px; height: 200px;"">
+    <utk:UTKTab label=""Tab 1"">
+        <ui:Label text=""Content 1"" />
+    </utk:UTKTab>
+    <utk:UTKTab label=""Tab 2"">
+        <ui:Label text=""Content 2"" />
+    </utk:UTKTab>
+</utk:UTKTabView>
+
+<!-- 동적 생성도 권장 -->
+<utk:UTKTabView name=""tab-view-1"" align=""Top"" />
+
+</ui:UXML>");
     }
 
     #endregion

Assets/Sample/UIToolkit/UTKStyleGuideSample.cs

@@ -76,6 +76,7 @@ public partial class UTKStyleGuideSample : MonoBehaviour
         // Dropdown
         ["UTKDropdown"] = "UIToolkit/Sample/Dropdown/UTKDropdownSample",
         ["UTKEnumDropDown"] = "UIToolkit/Sample/Dropdown/UTKEnumDropDownSample",
+        ["UTKMultiSelectDropdown"] = "UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample",
         // Label
         ["UTKLabel"] = "UIToolkit/Sample/Label/UTKLabelSample",
         ["UTKHelpBox"] = "UIToolkit/Sample/Label/UTKHelpBoxSample",
@@ -112,7 +113,7 @@ public partial class UTKStyleGuideSample : MonoBehaviour
         ["Button"] = new[] { "UTKButton", "UTKCheckBox", "UTKToggle", "UTKRadioButton", "UTKToggleButtonGroup" },
         ["Input"] = new[] { "UTKInputField", "UTKIntegerField", "UTKLongField", "UTKFloatField", "UTKDoubleField", "UTKVector2Field", "UTKVector3Field", "UTKVector4Field", "UTKRectField", "UTKBoundsField", "UTKNumberStepper" },
         ["Slider"] = new[] { "UTKSlider", "UTKSliderInt", "UTKMinMaxSlider", "UTKProgressBar" },
-        ["Dropdown"] = new[] { "UTKDropdown", "UTKEnumDropDown" },
+        ["Dropdown"] = new[] { "UTKDropdown", "UTKEnumDropDown", "UTKMultiSelectDropdown" },
         ["Label"] = new[] { "UTKLabel", "UTKHelpBox" },
         ["List"] = new[] { "UTKListView", "UTKTreeView", "UTKMultiColumnListView", "UTKMultiColumnTreeView", "UTKFoldout", "UTKScrollView" },
         ["Card"] = new[] { "UTKCard", "UTKPanel" },
@@ -485,6 +486,9 @@ public partial class UTKStyleGuideSample : MonoBehaviour
             case "UTKEnumDropDown":
                 InitializeEnumDropDownSample(root);
                 break;
+            case "UTKMultiSelectDropdown":
+                InitializeMultiSelectDropdownSample(root);
+                break;
             // Label
             case "UTKLabel":
                 InitializeLabelSample(root);