diff --git a/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml b/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml
new file mode 100644
index 00000000..b1986a21
--- /dev/null
+++ b/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml.meta b/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml.meta
new file mode 100644
index 00000000..ae3e9f73
--- /dev/null
+++ b/Assets/Resources/UIToolkit/Sample/Dropdown/UTKMultiSelectDropdownSample.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 3f8a9c2d7e1b4f6a9d5c8e2b1a4f7c9e
+ScriptedImporter:
+ internalIDToNameTable: []
+ externalObjects: {}
+ serializedVersion: 2
+ userData:
+ assetBundleName:
+ assetBundleVariant:
+ script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uss b/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uss
index 245b86e2..da6031a4 100644
--- a/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uss
+++ b/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uss
@@ -6,6 +6,9 @@
*/
.utk-sample-tabview-container {
- width: 400px;
- height: 200px;
+ width: 100%;
+ min-height: 220px;
+ margin-bottom: var(--space-m);
+ align-items: flex-start;
+ justify-content: flex-start;
}
diff --git a/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uxml b/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uxml
index a00b3e05..14a48550 100644
--- a/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uxml
+++ b/Assets/Resources/UIToolkit/Sample/Tab/UTKTabViewSample.uxml
@@ -6,10 +6,35 @@
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Assets/Resources/UIToolkit/Tab/UTKTabView.uss b/Assets/Resources/UIToolkit/Tab/UTKTabView.uss
index 9335ff70..ae730fd7 100644
--- a/Assets/Resources/UIToolkit/Tab/UTKTabView.uss
+++ b/Assets/Resources/UIToolkit/Tab/UTKTabView.uss
@@ -19,10 +19,7 @@
Tab Header Strip
=================================== */
-.utk-tabview > .unity-tab-view__header-container {
- flex-direction: row;
- border-bottom-width: var(--border-width);
- border-bottom-color: var(--color-border);
+.utk-tabview .unity-tab-view__header-container {
background-color: transparent;
}
@@ -94,6 +91,105 @@
right: 0;
}
-.utk-tabview .unity-tab__header:checked > .unity-tab__header-underline {
+.utk-tabview .unity-tab__header:checked .unity-tab__header-underline {
background-color: var(--color-btn-primary) ;
}
+
+.utk-tabview .unity-tab-view__content-viewport {
+ align-items: stretch;
+}
+
+/* ===================================
+ Tab Alignment Modes
+ =================================== */
+
+/* Top Alignment (Default) - 탭이 위쪽에 배치 */
+.utk-tabview.utk-tabview--align-top {
+ flex-direction: column;
+}
+
+.utk-tabview.utk-tabview--align-top .unity-tab-view__header-container {
+ flex-direction: row;
+ border-bottom-width: var(--border-width);
+ border-bottom-color: var(--color-border);
+ border-top-width: 0;
+ border-left-width: 0;
+ border-right-width: 0;
+ flex-grow: 1;
+}
+
+/* Bottom Alignment - 탭이 아래쪽에 배치 */
+.utk-tabview.utk-tabview--align-bottom {
+ flex-direction: column-reverse;
+}
+
+.utk-tabview.utk-tabview--align-bottom .unity-tab-view__header-container {
+ flex-direction: row;
+ border-top-width: var(--border-width);
+ border-top-color: var(--color-border);
+ border-bottom-width: 0;
+ border-left-width: 0;
+ border-right-width: 0;
+ flex-grow: 1;
+}
+
+.utk-tabview.utk-tabview--align-bottom .unity-tab__header-underline {
+ bottom: auto;
+ top: 0;
+}
+
+/* Left Alignment - 탭이 왼쪽에 세로로 배치 */
+.utk-tabview.utk-tabview--align-left {
+ flex-direction: row;
+}
+
+.utk-tabview.utk-tabview--align-left .unity-tab-view__header-container {
+ flex-direction: column;
+ border-right-width: var(--border-width);
+ border-right-color: var(--color-border);
+ border-bottom-width: 0;
+ border-top-width: 0;
+ border-left-width: 0;
+}
+
+.utk-tabview.utk-tabview--align-left .unity-tab__header {
+ margin-right: 0;
+ margin-bottom: var(--space-s);
+}
+
+.utk-tabview.utk-tabview--align-left .unity-tab__header-underline {
+ left: auto;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ width: 2px;
+ height: auto;
+}
+
+/* Right Alignment - 탭이 오른쪽에 세로로 배치 */
+.utk-tabview.utk-tabview--align-right {
+ flex-direction: row-reverse;
+}
+
+.utk-tabview.utk-tabview--align-right .unity-tab-view__header-container {
+ flex-direction: column;
+ border-left-width: var(--border-width);
+ border-left-color: var(--color-border);
+ border-bottom-width: 0;
+ border-top-width: 0;
+ border-right-width: 0;
+}
+
+.utk-tabview.utk-tabview--align-right .unity-tab__header {
+ margin-right: 0;
+ margin-bottom: var(--space-s);
+}
+
+.utk-tabview.utk-tabview--align-right .unity-tab__header-underline {
+ right: auto;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ width: 2px;
+ height: auto;
+}
diff --git a/Assets/Sample/UIToolkit/UTKStyleGuideSample.Input.cs b/Assets/Sample/UIToolkit/UTKStyleGuideSample.Input.cs
index edc9d1b3..7850ab4e 100644
--- a/Assets/Sample/UIToolkit/UTKStyleGuideSample.Input.cs
+++ b/Assets/Sample/UIToolkit/UTKStyleGuideSample.Input.cs
@@ -449,12 +449,15 @@ var dropdown = new UTKDropdown(""Select Option"");
dropdown.SetOptions(new List { ""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 { ""이름"", ""날짜"", ""크기"" });
+
// 선택된 값 가져오기
var selectedIndex = dropdown.SelectedIndex;
var selectedValue = dropdown.SelectedValue;
@@ -462,22 +465,42 @@ var selectedValue = dropdown.SelectedValue;
// 옵션 동적 변경
dropdown.SetOptions(new List { ""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 { ""Option 1"", ""Option 2"" });
disabledDropdown.SelectedIndex = 0;
disabledDropdown.IsEnabled = false;",
- uxmlCode: @"
-
+ uxmlCode: @"
+
-
-
+
+
-
-");
+
+
+
+
+
+
+
+
+
+
+
+
+");
}
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: @"
-
+ uxmlCode: @"
+
+
+
+
-");
+
+
+
+
+
+");
}
+ private void InitializeMultiSelectDropdownSample(VisualElement root)
+ {
+ var normalRow = root.Q("multiselect-normal-row");
+ if (normalRow != null)
+ {
+ var dropdown = new UTKMultiSelectDropdown("Select Categories");
+ dropdown.SetOptions(new List { "Category 1", "Category 2", "Category 3", "Category 4", "Category 5" });
+ dropdown.SetSelectedIndices(new List { 0, 2 });
+ normalRow.Add(dropdown);
+ }
+
+ var disabledRow = root.Q("multiselect-disabled-row");
+ if (disabledRow != null)
+ {
+ var dropdown = new UTKMultiSelectDropdown("Disabled");
+ dropdown.SetOptions(new List { "Option 1", "Option 2", "Option 3" });
+ dropdown.SetSelectedIndices(new List { 0, 1 });
+ dropdown.IsEnabled = false;
+ disabledRow.Add(dropdown);
+ }
+
+ SetCodeSamples(root,
+ csharpCode: @"// 기본 사용법
+var dropdown = new UTKMultiSelectDropdown(""Select Categories"");
+dropdown.SetOptions(new List { ""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 { ""과일"", ""채소"", ""육류"", ""유제품"" }
+);
+
+// 기본값 설정 (인덱스로)
+categoryDropdown.SetSelectedIndices(new List { 0, 2 });
+
+// 기본값 설정 (값으로)
+categoryDropdown.SetSelectedValues(new List { ""과일"", ""육류"" });
+
+// 이벤트 없이 선택 변경 (초기화 시 유용)
+categoryDropdown.SetSelectedIndices(new List { 1, 3 }, notify: false);
+
+// 선택된 값 가져오기
+var selectedIndices = dropdown.SelectedIndices;
+var selectedValues = dropdown.SelectedValues;
+
+// 전체 선택
+dropdown.SelectAll();
+
+// 전체 해제
+dropdown.ClearSelection();
+
+// 옵션 동적 변경
+dropdown.SetOptions(new List { ""New 1"", ""New 2"", ""New 3"" });
+
+// Disabled
+var disabledDropdown = new UTKMultiSelectDropdown(""Disabled"");
+disabledDropdown.SetOptions(new List { ""Option 1"", ""Option 2"", ""Option 3"" });
+disabledDropdown.SetSelectedIndices(new List { 0, 1 });
+disabledDropdown.IsEnabled = false;",
+ uxmlCode: @"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+");
+ }
+
+ #endregion
+
#region Slider Initializers
private void InitializeSliderSample(VisualElement root)
@@ -683,6 +835,4 @@ async UniTask LoadDataAsync()
}
#endregion
-
- #endregion
}
diff --git a/Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs b/Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs
index 823977a7..5bce887e 100644
--- a/Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs
+++ b/Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs
@@ -15,30 +15,96 @@ public partial class UTKStyleGuideSample
private void InitializeTabViewSample(VisualElement root)
{
- var tabContainer = root.Q("tabview-container");
- if (tabContainer != null)
+ // Top Alignment (기본)
+ var tabContainerTop = root.Q("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("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("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("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: @"
-
+var currentTab = tabView.SelectedIndex;",
+ uxmlCode: @"
+
-
-");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+");
}
#endregion
diff --git a/Assets/Sample/UIToolkit/UTKStyleGuideSample.cs b/Assets/Sample/UIToolkit/UTKStyleGuideSample.cs
index c1afa921..4bfa4864 100644
--- a/Assets/Sample/UIToolkit/UTKStyleGuideSample.cs
+++ b/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);
diff --git a/Assets/Scripts/UVC/UIToolkit/Tab/UTKTabView.cs b/Assets/Scripts/UVC/UIToolkit/Tab/UTKTabView.cs
index b3fd2067..fdd1d3c3 100644
--- a/Assets/Scripts/UVC/UIToolkit/Tab/UTKTabView.cs
+++ b/Assets/Scripts/UVC/UIToolkit/Tab/UTKTabView.cs
@@ -6,6 +6,21 @@ using UnityEngine.UIElements;
namespace UVC.UIToolkit
{
+ ///
+ /// 탭 정렬 방향
+ ///
+ public enum TabAlign
+ {
+ /// 탭이 위쪽에 배치
+ Top,
+ /// 탭이 아래쪽에 배치
+ Bottom,
+ /// 탭이 왼쪽에 배치 (세로 정렬)
+ Left,
+ /// 탭이 오른쪽에 배치 (세로 정렬)
+ Right
+ }
+
///
/// 탭 뷰 컴포넌트.
/// Unity TabView를 래핑하여 커스텀 스타일을 적용합니다.
@@ -29,6 +44,7 @@ namespace UVC.UIToolkit
///
/// - SelectedIndex - 현재 선택된 탭 인덱스
/// - UTKTabs - 탭 목록 (읽기 전용)
+ /// - Align - 탭 정렬 방향 (Top, Bottom, Left, Right)
///
///
/// 주요 메서드:
@@ -59,21 +75,25 @@ namespace UVC.UIToolkit
/// var tabView = new UTKTabView();
///
/// // 탭 추가
- /// var tab1 = tabView.AddTab("일반", UTKMaterialIcons.Settings);
+ /// var tab1 = tabView.AddUTKTab("일반");
/// tab1.Add(new Label("일반 설정 내용"));
///
- /// var tab2 = tabView.AddTab("고급", UTKMaterialIcons.Build);
+ /// var tab2 = tabView.AddUTKTab("고급");
/// tab2.Add(new Label("고급 설정 내용"));
///
/// // 탭 변경 이벤트
/// tabView.OnTabChanged += (index, tab) => Debug.Log($"탭 {index} 선택됨");
///
+ /// // 탭 정렬 방향 설정
+ /// tabView.Align = TabAlign.Left; // 탭을 왼쪽에 세로로 배치
+ ///
/// // 탭 선택
/// tabView.SelectedIndex = 0;
///
/// UXML에서 사용:
///
///
+ ///
///
///
///
@@ -82,6 +102,16 @@ namespace UVC.UIToolkit
///
///
///
+ ///
+ ///
+ ///
+ ///
+ ///
+ ///
+ ///
+ ///
+ ///
+ ///
///
///
///
@@ -95,6 +125,7 @@ namespace UVC.UIToolkit
#region Fields
private bool _disposed;
private readonly List _utkTabs = new();
+ private TabAlign _align = TabAlign.Top;
#endregion
#region Events
@@ -112,6 +143,19 @@ namespace UVC.UIToolkit
/// UTK 탭 목록
public IReadOnlyList UTKTabs => _utkTabs;
+
+ /// 탭 정렬 방향
+ [UxmlAttribute("align")]
+ public TabAlign Align
+ {
+ get => _align;
+ set
+ {
+ if (_align == value) return;
+ _align = value;
+ ApplyAlignment();
+ }
+ }
#endregion
#region Constructor
@@ -135,6 +179,7 @@ namespace UVC.UIToolkit
private void SetupStyles()
{
AddToClassList("utk-tabview");
+ ApplyAlignment();
}
private void SetupEvents()
@@ -174,6 +219,35 @@ namespace UVC.UIToolkit
#endregion
#region Methods
+ ///
+ /// 탭 정렬 방향 적용
+ ///
+ private void ApplyAlignment()
+ {
+ // 기존 align 클래스 제거
+ RemoveFromClassList("utk-tabview--align-top");
+ RemoveFromClassList("utk-tabview--align-bottom");
+ RemoveFromClassList("utk-tabview--align-left");
+ RemoveFromClassList("utk-tabview--align-right");
+
+ // 새로운 align 클래스 추가
+ switch (_align)
+ {
+ case TabAlign.Top:
+ AddToClassList("utk-tabview--align-top");
+ break;
+ case TabAlign.Bottom:
+ AddToClassList("utk-tabview--align-bottom");
+ break;
+ case TabAlign.Left:
+ AddToClassList("utk-tabview--align-left");
+ break;
+ case TabAlign.Right:
+ AddToClassList("utk-tabview--align-right");
+ break;
+ }
+ }
+
///
/// UTK 탭 추가
///