khi/XRLib
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
김형인
2026-02-07 00:15:41 +09:00
parent a7fc12f32f
commit a38efd756e
9 changed files with 549 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
Assets/Sample/UIToolkit/UTKStyleGuideSample.Modal.cs
View File

@@ -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