476 lines
16 KiB
C#
476 lines
16 KiB
C#
#nullable enable
|
|
using System;
|
|
using System.Collections.Generic;
|
|
using Cysharp.Threading.Tasks;
|
|
using UnityEngine;
|
|
using UnityEngine.UIElements;
|
|
using UVC.UIToolkit;
|
|
|
|
/// <summary>
|
|
/// UTKStyleGuideSample의 Button 카테고리 Initialize 메서드들
|
|
/// </summary>
|
|
public partial class UTKStyleGuideSample
|
|
{
|
|
#region Button Initializers
|
|
|
|
private void InitializeCheckBoxSample(VisualElement root)
|
|
{
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// 기본 체크박스
|
|
var checkbox = new UTKCheckBox();
|
|
checkbox.Text = ""약관에 동의합니다"";
|
|
checkbox.OnValueChanged += (isChecked) => Debug.Log($""체크: {isChecked}"");
|
|
|
|
// 상태 설정
|
|
checkbox.IsChecked = true;
|
|
checkbox.IsIndeterminate = true; // 부분 선택 상태
|
|
|
|
// 생성자로 생성
|
|
var acceptCheckbox = new UTKCheckBox(""이메일 수신 동의"", true);
|
|
|
|
// 비활성화
|
|
checkbox.IsEnabled = false;
|
|
|
|
// 상태 확인
|
|
if (checkbox.IsChecked)
|
|
{
|
|
Debug.Log(""체크되어 있습니다"");
|
|
}
|
|
|
|
// 토글
|
|
checkbox.IsChecked = !checkbox.IsChecked;",
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
|
|
|
<!-- 기본 체크박스 -->
|
|
<utk:UTKCheckBox text=""이메일 수신 동의"" />
|
|
|
|
<!-- 기본값 체크됨 -->
|
|
<utk:UTKCheckBox text=""자동 로그인"" is-checked=""true"" />
|
|
|
|
<!-- 불확정 상태 -->
|
|
<utk:UTKCheckBox text=""부분 선택"" is-indeterminate=""true"" />
|
|
|
|
<!-- 비활성화 -->
|
|
<utk:UTKCheckBox text=""필수 동의"" is-enabled=""false"" is-checked=""true"" />
|
|
|
|
</ui:UXML>");
|
|
}
|
|
|
|
private void InitializeToggleSample(VisualElement root)
|
|
{
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// 기본 토글
|
|
var toggle = new UTKToggle();
|
|
toggle.label = ""알림 받기""; // Unity Toggle의 label 프로퍼티 (소문자)
|
|
toggle.IsOn = true;
|
|
toggle.OnValueChanged += (isOn) => Debug.Log($""토글: {isOn}"");
|
|
|
|
// 생성자로 생성
|
|
var darkModeToggle = new UTKToggle(""다크 모드"");
|
|
|
|
// 상태 설정 (알림 없이)
|
|
toggle.SetOn(true, notify: false);
|
|
|
|
// 상태 설정 (알림 포함)
|
|
toggle.SetOn(false, notify: true);
|
|
|
|
// 비활성화
|
|
toggle.IsEnabled = false;
|
|
|
|
// 상태 확인
|
|
if (toggle.IsOn)
|
|
{
|
|
Debug.Log(""켜져 있습니다"");
|
|
}",
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
|
|
|
<!-- 기본 토글 -->
|
|
<utk:UTKToggle label=""다크 모드"" />
|
|
|
|
<!-- 기본값 켜짐 -->
|
|
<utk:UTKToggle label=""자동 저장"" is-on=""true"" />
|
|
|
|
<!-- 비활성화 (꺼짐) -->
|
|
<utk:UTKToggle label=""프리미엄 기능"" is-enabled=""false"" />
|
|
|
|
<!-- 비활성화 (켜짐) -->
|
|
<utk:UTKToggle label=""필수 기능"" is-on=""true"" is-enabled=""false"" />
|
|
|
|
</ui:UXML>");
|
|
}
|
|
|
|
private void InitializeRadioButtonSample(VisualElement root)
|
|
{
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// 라디오 버튼 그룹
|
|
var group = new RadioButtonGroup();
|
|
var radio1 = new UTKRadioButton { text = ""옵션 1"" };
|
|
var radio2 = new UTKRadioButton { text = ""옵션 2"" };
|
|
var radio3 = new UTKRadioButton { text = ""옵션 3"" };
|
|
group.Add(radio1);
|
|
group.Add(radio2);
|
|
group.Add(radio3);
|
|
|
|
// 선택 이벤트
|
|
radio1.OnValueChanged += (isSelected) =>
|
|
{
|
|
if (isSelected) Debug.Log(""옵션 1 선택됨"");
|
|
};
|
|
|
|
// 생성자로 생성
|
|
var optionA = new UTKRadioButton(""옵션 A"");
|
|
|
|
// 프로그램으로 선택
|
|
radio2.SetChecked(true, notify: true);
|
|
|
|
// 비활성화
|
|
radio3.IsEnabled = false;
|
|
|
|
// 현재 선택 확인
|
|
if (radio1.IsChecked)
|
|
{
|
|
Debug.Log(""라디오 1이 선택됨"");
|
|
}",
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
|
|
|
<!-- 라디오 버튼 그룹 -->
|
|
<ui:RadioButtonGroup>
|
|
<utk:UTKRadioButton text=""소형"" />
|
|
<utk:UTKRadioButton text=""중형"" is-checked=""true"" />
|
|
<utk:UTKRadioButton text=""대형"" />
|
|
</ui:RadioButtonGroup>
|
|
|
|
<!-- 비활성화 옵션 포함 -->
|
|
<ui:RadioButtonGroup>
|
|
<utk:UTKRadioButton text=""옵션 A"" is-checked=""true"" />
|
|
<utk:UTKRadioButton text=""옵션 B"" />
|
|
<utk:UTKRadioButton text=""옵션 C"" />
|
|
<utk:UTKRadioButton text=""비활성화"" is-enabled=""false"" />
|
|
</ui:RadioButtonGroup>
|
|
|
|
</ui:UXML>");
|
|
}
|
|
|
|
private void InitializeButtonSample(VisualElement root)
|
|
{
|
|
// Icon Only 버튼 추가
|
|
var iconOnlyRow = root.Q<VisualElement>("icon-only-row");
|
|
if (iconOnlyRow != null)
|
|
{
|
|
iconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.PlusOne, UTKButton.ButtonVariant.Primary) { IconOnly = true });
|
|
iconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Edit, UTKButton.ButtonVariant.Normal) { IconOnly = true });
|
|
iconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Close, UTKButton.ButtonVariant.Danger) { IconOnly = true });
|
|
iconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Settings, UTKButton.ButtonVariant.OutlinePrimary) { IconOnly = true });
|
|
iconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Cancel, UTKButton.ButtonVariant.Normal) { IconOnly = true });
|
|
}
|
|
|
|
// Ghost 버튼 아이콘 추가
|
|
var ghostRow = root.Q<VisualElement>("ghost-row");
|
|
if (ghostRow != null)
|
|
{
|
|
ghostRow.Add(new UTKButton("", UTKMaterialIcons.Settings, UTKButton.ButtonVariant.Ghost) { IconOnly = true });
|
|
}
|
|
|
|
// Text with icon 추가
|
|
var textRow = root.Q<VisualElement>("text-row");
|
|
if (textRow != null)
|
|
{
|
|
textRow.Add(new UTKButton("With Icon", UTKMaterialIcons.FlashOn, UTKButton.ButtonVariant.Text));
|
|
}
|
|
|
|
// Text Icon Only (Circle) 추가
|
|
var textIconOnlyRow = root.Q<VisualElement>("text-icon-only-row");
|
|
if (textIconOnlyRow != null)
|
|
{
|
|
textIconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Close, UTKButton.ButtonVariant.Text, 12) { IconOnly = true });
|
|
textIconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Check, UTKButton.ButtonVariant.Text, 12) { IconOnly = true });
|
|
textIconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Settings, UTKButton.ButtonVariant.Text, 12) { IconOnly = true });
|
|
textIconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Edit, UTKButton.ButtonVariant.Text, 12) { IconOnly = true });
|
|
textIconOnlyRow.Add(new UTKButton("", UTKMaterialIcons.Search, UTKButton.ButtonVariant.Text, 12) { IconOnly = true });
|
|
}
|
|
|
|
// C# 코드 샘플 설정
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// 1. Filled Buttons (배경이 채워진 버튼)
|
|
var primaryBtn = new UTKButton(""Primary"", variant: ButtonVariant.Primary);
|
|
var normalBtn = new UTKButton(""Normal"", variant: ButtonVariant.Normal);
|
|
var dangerBtn = new UTKButton(""Danger"", variant: ButtonVariant.Danger);
|
|
primaryBtn.OnClicked += () => Debug.Log(""Primary 클릭!"");
|
|
|
|
// 2. Outline Buttons (외곽선 버튼)
|
|
var outlinePrimary = new UTKButton(""Outline Primary"", variant: ButtonVariant.OutlinePrimary);
|
|
var outlineNormal = new UTKButton(""Outline Normal"", variant: ButtonVariant.OutlineNormal);
|
|
var outlineDanger = new UTKButton(""Outline Danger"", variant: ButtonVariant.OutlineDanger);
|
|
|
|
// 3. Icon Only (아이콘만 표시)
|
|
var plusOneBtn = new UTKButton("""", UTKMaterialIcons.PlusOne, ButtonVariant.Primary) { IconOnly = true };
|
|
var editBtn = new UTKButton("""", UTKMaterialIcons.Edit, ButtonVariant.Normal) { IconOnly = true };
|
|
var closeBtn = new UTKButton("""", UTKMaterialIcons.Close, ButtonVariant.Danger) { IconOnly = true };
|
|
|
|
// 4. Ghost (반투명 배경)
|
|
var ghostBtn = new UTKButton(""Ghost"", variant: ButtonVariant.Ghost);
|
|
var ghostIconBtn = new UTKButton("""", UTKMaterialIcons.Settings, ButtonVariant.Ghost) { IconOnly = true };
|
|
|
|
// 5. Text (배경 없음)
|
|
var textOnlyBtn = new UTKButton(""Text Only"", variant: ButtonVariant.Text);
|
|
var linkStyleBtn = new UTKButton(""Link Style"", variant: ButtonVariant.Text);
|
|
var withIconBtn = new UTKButton(""With Icon"", UTKMaterialIcons.Bolt, ButtonVariant.Text);
|
|
|
|
// 6. Text Icon Only (Circle)
|
|
var circleBtn = new UTKButton("""", UTKMaterialIcons.Home, ButtonVariant.Text, 12) { IconOnly = true };
|
|
|
|
// 7. Disabled (비활성화)
|
|
var disabledBtn = new UTKButton(""Disabled"", variant: ButtonVariant.Primary);
|
|
disabledBtn.SetEnabled(false);
|
|
|
|
// 8. Action 사용 - 동기 작업
|
|
var saveBtn = new UTKButton(""저장"", UTKMaterialIcons.Save, ButtonVariant.Primary);
|
|
saveBtn.OnClicked += () => { Debug.Log(""저장 중...""); SaveData(); };
|
|
|
|
// Action 사용 - UniTask 비동기 작업
|
|
var loadBtn = new UTKButton(""로드"", UTKMaterialIcons.Download, ButtonVariant.Primary);
|
|
loadBtn.OnClicked += async () => {
|
|
Debug.Log(""로딩 시작..."");
|
|
await LoadDataAsync();
|
|
Debug.Log(""로딩 완료!"");
|
|
};
|
|
|
|
// 9. 아이콘 설정 방법
|
|
var btn = new UTKButton(""설정"");
|
|
btn.SetMaterialIcon(UTKMaterialIcons.Settings);
|
|
btn.SetImageIcon(UTKImageIcons.BtnClose22);
|
|
await btn.SetMaterialIconAsync(UTKMaterialIcons.Search);
|
|
btn.IconSize = 24;
|
|
btn.ClearIcon();
|
|
|
|
// 10. 기타 속성
|
|
btn.Size = ButtonSize.Large;
|
|
btn.BackgroundColor = new Color(0.2f, 0.4f, 0.8f);
|
|
btn.BorderWidth = 2;
|
|
btn.Text = ""새로운 텍스트"";",
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
|
|
|
<!-- 1. Filled Buttons -->
|
|
<utk:UTKButton text=""Primary"" variant=""Primary"" />
|
|
<utk:UTKButton text=""Normal"" variant=""Normal"" />
|
|
<utk:UTKButton text=""Danger"" variant=""Danger"" />
|
|
|
|
<!-- 2. Outline Buttons -->
|
|
<utk:UTKButton text=""Outline Primary"" variant=""OutlinePrimary"" />
|
|
<utk:UTKButton text=""Outline Normal"" variant=""OutlineNormal"" />
|
|
<utk:UTKButton text=""Outline Danger"" variant=""OutlineDanger"" />
|
|
|
|
<!-- 3. Icon Only -->
|
|
<utk:UTKButton icon=""close"" icon-only=""true"" variant=""Primary"" />
|
|
<utk:UTKButton icon=""settings"" icon-only=""true"" variant=""Normal"" />
|
|
<utk:UTKButton icon=""cancel"" icon-only=""true"" variant=""Danger"" />
|
|
|
|
<!-- 4. Ghost -->
|
|
<utk:UTKButton text=""Ghost"" variant=""Ghost"" />
|
|
<utk:UTKButton icon=""close"" icon-only=""true"" variant=""Ghost"" />
|
|
|
|
<!-- 5. Text -->
|
|
<utk:UTKButton text=""Text Only"" variant=""Text"" />
|
|
<utk:UTKButton text=""Link Style"" variant=""Text"" />
|
|
<utk:UTKButton text=""With Icon"" icon=""refresh"" variant=""Text"" />
|
|
|
|
<!-- 6. Text Icon Only (Circle) -->
|
|
<utk:UTKButton icon=""close"" icon-size=""12"" icon-only=""true"" variant=""Text"" />
|
|
|
|
<!-- 7. Disabled -->
|
|
<utk:UTKButton text=""Disabled"" variant=""Primary"" is-enabled=""false"" />
|
|
<utk:UTKButton text=""Disabled"" variant=""Normal"" is-enabled=""false"" />
|
|
|
|
<!-- 8. 크기 변형 -->
|
|
<utk:UTKButton text=""작은 버튼"" size=""Small"" />
|
|
<utk:UTKButton text=""큰 버튼"" size=""Large"" />
|
|
|
|
<!-- 9. 아이콘 크기 지정 -->
|
|
<utk:UTKButton icon=""close"" icon-size=""24"" icon-only=""true"" />
|
|
|
|
<!-- 10. 외곽선 굵기 -->
|
|
<utk:UTKButton text=""두꺼운 외곽선"" border-width=""2"" />
|
|
|
|
</ui:UXML>");
|
|
|
|
}
|
|
|
|
private void InitializeToggleButtonGroupSample(VisualElement root)
|
|
{
|
|
// Single Select
|
|
var singleSelectRow = root.Q<VisualElement>("single-select-row");
|
|
if (singleSelectRow != null)
|
|
{
|
|
var group1 = new UTKToggleButtonGroup();
|
|
group1.AddButton("Option 1");
|
|
group1.AddButton("Option 2");
|
|
group1.AddButton("Option 3");
|
|
singleSelectRow.Add(group1);
|
|
}
|
|
|
|
// Multi Select
|
|
var multiSelectRow = root.Q<VisualElement>("multi-select-row");
|
|
if (multiSelectRow != null)
|
|
{
|
|
var group2 = new UTKToggleButtonGroup { isMultipleSelection = true };
|
|
group2.AddButton("A");
|
|
group2.AddButton("B");
|
|
group2.AddButton("C");
|
|
group2.AddButton("D");
|
|
multiSelectRow.Add(group2);
|
|
}
|
|
|
|
// Disabled
|
|
var disabledRow = root.Q<VisualElement>("disabled-row");
|
|
if (disabledRow != null)
|
|
{
|
|
var group3 = new UTKToggleButtonGroup { IsEnabled = false };
|
|
group3.AddButton("Option 1");
|
|
group3.AddButton("Option 2");
|
|
group3.AddButton("Option 3");
|
|
disabledRow.Add(group3);
|
|
}
|
|
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// Single Selection (기본)
|
|
var group1 = new UTKToggleButtonGroup();
|
|
group1.AddButton(""Option 1"");
|
|
group1.AddButton(""Option 2"");
|
|
group1.AddButton(""Option 3"");
|
|
|
|
// 선택 이벤트
|
|
group1.OnSelectionChanged += (indices) =>
|
|
{
|
|
foreach (var index in indices)
|
|
{
|
|
Debug.Log($""선택된 버튼: {index}"");
|
|
}
|
|
};
|
|
|
|
// Multiple Selection
|
|
var group2 = new UTKToggleButtonGroup { isMultipleSelection = true };
|
|
group2.AddButton(""A"");
|
|
group2.AddButton(""B"");
|
|
group2.AddButton(""C"");
|
|
group2.AddButton(""D"");
|
|
|
|
group2.OnSelectionChanged += (indices) =>
|
|
{
|
|
Debug.Log($""토글된 버튼 수: {indices.Count()}"");
|
|
};
|
|
|
|
// 선택된 인덱스 가져오기 (Unity 기본 API)
|
|
var state = group1.value;
|
|
var buffer = new int[state.length];
|
|
var activeOptions = state.GetActiveOptions(buffer);
|
|
|
|
// Disabled
|
|
var group3 = new UTKToggleButtonGroup { IsEnabled = false };
|
|
group3.AddButton(""Option 1"");
|
|
group3.AddButton(""Option 2"");
|
|
group3.AddButton(""Option 3"");" ,
|
|
uxmlCode: @"<!-- UTKToggleButtonGroup은 동적 생성 권장 -->
|
|
<!-- C# 코드에서 AddButton으로 버튼 추가 -->
|
|
|
|
<!-- Single Selection 예시 -->
|
|
<utk:UTKToggleButtonGroup name=""toggle-group-1"" />
|
|
|
|
<!-- Multiple Selection 예시 -->
|
|
<utk:UTKToggleButtonGroup name=""toggle-group-2"" is-multiple-selection=""true"" />
|
|
|
|
<!-- Disabled -->
|
|
<utk:UTKToggleButtonGroup name=""toggle-group-3"" is-enabled=""false"" />");
|
|
}
|
|
|
|
private void InitializeImageToggleButtonSample(VisualElement root)
|
|
{
|
|
// Image Icon 행: UTKImageIcons 사용
|
|
var imageIconRow = root.Q<VisualElement>("image-icon-row");
|
|
if (imageIconRow != null)
|
|
{
|
|
var btn1 = new UTKImageToggleButton(
|
|
onIcon: UTKImageIcons.IconEye22x16,
|
|
offIcon: UTKImageIcons.IconEyeClose22x16,
|
|
iconSize: 16
|
|
) { Size = new Vector2Int(24, 24) };
|
|
imageIconRow.Add(btn1);
|
|
|
|
var btn2 = new UTKImageToggleButton(
|
|
onIcon: UTKImageIcons.IconEye22x16,
|
|
offIcon: UTKImageIcons.IconEyeClose22x16,
|
|
iconSize: 16
|
|
) { Size = new Vector2Int(24, 24) };
|
|
btn2.SetOn(true, notify: false);
|
|
imageIconRow.Add(btn2);
|
|
}
|
|
|
|
// Size 행
|
|
var sizeRow = root.Q<VisualElement>("size-row");
|
|
if (sizeRow != null)
|
|
{
|
|
sizeRow.Add(new UTKImageToggleButton(UTKMaterialIcons.FolderOpen, UTKMaterialIcons.Folder, 12) { Size = new Vector2Int(20, 20) });
|
|
sizeRow.Add(new UTKImageToggleButton(UTKMaterialIcons.FolderOpen, UTKMaterialIcons.Folder, 20) { Size = new Vector2Int(28, 28) });
|
|
sizeRow.Add(new UTKImageToggleButton(UTKMaterialIcons.FolderOpen, UTKMaterialIcons.Folder, 28) { Size = new Vector2Int(36, 36) });
|
|
}
|
|
|
|
SetCodeSamples(root,
|
|
csharpCode: @"// Material Icon 사용 (자동 감지)
|
|
var btn = new UTKImageToggleButton(
|
|
onIcon: UTKMaterialIcons.FolderOpen,
|
|
offIcon: UTKMaterialIcons.Folder,
|
|
iconSize: 20
|
|
);
|
|
btn.OnValueChanged += (isOn) => Debug.Log($""상태: {isOn}"");
|
|
|
|
// Image Icon 사용 (UTKImageIcons 상수 전달)
|
|
var btn2 = new UTKImageToggleButton(
|
|
onIcon: UTKImageIcons.IconEye22x16,
|
|
offIcon: UTKImageIcons.IconEyeClose22x16,
|
|
iconSize: 16
|
|
) { Size = new Vector2Int(24, 24) };
|
|
|
|
// 크기 지정
|
|
btn.Size = new Vector2Int(32, 32);
|
|
|
|
// 프로그래밍 방식 상태 변경 (알림 없이)
|
|
btn.SetOn(true, notify: false);
|
|
|
|
// 비활성화 (시각적 + 입력 차단)
|
|
btn.IsEnabled = false;
|
|
|
|
// 입력만 차단 (시각적 활성화 유지)
|
|
btn.IsInteractive = false;
|
|
|
|
// 상태 확인
|
|
if (btn.IsOn)
|
|
{
|
|
Debug.Log(""On 상태"");
|
|
}",
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
|
|
|
<!-- Material Icon (자동 감지) - Off 상태 -->
|
|
<utk:UTKImageToggleButton on-icon=""folder_open"" off-icon=""folder"" icon-size=""20"" />
|
|
|
|
<!-- Material Icon - On 상태 -->
|
|
<utk:UTKImageToggleButton on-icon=""visibility"" off-icon=""visibility_off"" icon-size=""20"" is-on=""true"" />
|
|
|
|
<!-- Disabled Off -->
|
|
<utk:UTKImageToggleButton on-icon=""folder_open"" off-icon=""folder"" icon-size=""20"" is-enabled=""false"" />
|
|
|
|
<!-- Disabled On -->
|
|
<utk:UTKImageToggleButton on-icon=""folder_open"" off-icon=""folder"" icon-size=""20"" is-on=""true"" is-enabled=""false"" />
|
|
|
|
<!-- Non-Interactive (입력만 차단) -->
|
|
<utk:UTKImageToggleButton on-icon=""folder_open"" off-icon=""folder"" icon-size=""20"" is-interactive=""false"" is-on=""true"" />
|
|
|
|
</ui:UXML>");
|
|
}
|
|
|
|
#endregion
|
|
}
|