TextField는 사용자가 애플리케이션에 텍스트 데이터를 입력하도록 합니다. 이는 텍스트 입력을 수락 및 표시합니다. 플레이스홀더 텍스트를 설정하여 사용자에게 무엇을 입력할지에 대한 힌트나 지침을 제공할 수 있습니다. 또한 확인 함수를 추가하여 입력된 데이터가 일정 요구 사항을 충족하도록 할 수도 있습니다.
참고: TextField를 인스펙터 창의 다른 필드에 맞추려면 .unity-base-field__aligned USS 클래스를 적용합니다. 자세한 내용은 BaseField를 참조하십시오.
UI Builder, UXML, C#으로 TextField를 생성할 수 있습니다. 다음 C# 예시에서는 여러 줄 텍스트 입력을 허용하는 TextField를 생성합니다.
var textField = new TextField();
textField.label = "Enter your text here:";
textField.multiline = true;
textField.maxLength = 140;
요소에 대한 플레이스홀더 텍스트를 설정할 수 있습니다. 또한 포커스에서 플레이스홀더 텍스트를 숨길 수도 있습니다.
참고: 요소에 대한 값을 설정하면 플레이스홀더 텍스트가 표시되지 않습니다. UI 빌더에서 값 설정을 해제하려면 요소의 인스펙터 탭에서 Value 필드를 오른쪽 클릭하고 Unset을 선택합니다.
C#에서 textEdition을 통해 placeholder 및 hidePlaceholderOnFocus 프로퍼티를 사용합니다.
myElement.textEdition.placeholder = "Enter your value here";
myElement.textEdition.hidePlaceholderOnFocus = true;
플레이스홀더 텍스트의 스타일을 지정하려면 .unity-base-text-field__input--placeholder USS 선택자를 사용합니다.
입력 텍스트는 기본적으로 선택할 수 있습니다.selectAllOnMouseUP 및 selectAllOnFocus와 같은 선택 동작을 커스터마이즈할 수 있습니다.
C#에서 textSelection을 통해 설정할 수 있습니다.
myElement.textSelection.selectAllOnMouseUp = false;
myElement.textSelection.selectAllOnFocus = false;
또한 --unity-selection-color USS 커스텀 프로퍼티를 사용하여 선택한 텍스트의 스타일을 지정할 수도 있습니다.예를 들어 다음 USS는 선택한 입력 텍스트의 컬러를 노란색으로 설정합니다.
.unity-base-text-field__input {
--unity-selection-color: yellow;
}
TextField에서 여러 줄 텍스트를 활성화한 경우 텍스트 입력 필드에 세로 스크롤바를 표시할 수 있습니다.
C#에서 verticalScrollerVisibility 프로퍼티를 ScrollerVisibility.Auto 또는 ScrollerVisibility.AlwaysVisible로 설정합니다.
// Set the multiline property to true to enable multiple lines of text
textField.multiline = true;
// Set the vertical scrollbar visibility to AlwaysVisible
textField.verticalScrollerVisibility = ScrollerVisibility.AlwaysVisible;
이벤트를 사용하여 입력 텍스트의 동작을 컨트롤할 수 있습니다.
예를 들어 TextField에서 Enter 및 Shift + Tab 키보드 이벤트에 대한 기본 동작을 오버라이드하려면 TextElement 기본 클래스에서 처리하기 전에 KeyDownEvent를 TrickleDown 단계에 등록합니다.
myField.RegisterCallback<KeyDownEvent>((evt) => {
if (evt.keyCode == KeyCode.Enter || evt.character == '/n')
{
// Submit logic
evt.StopPropagation();
evt.PreventDefault();
}
if (evt.modifiers == EventModifiers.Shift && (evt.keyCode == KeyCode.Tab || evt.character == '/t'))
{
// Focus logic
evt.StopPropagation();
evt.PreventDefault();
}
}, TrickleDown.TrickleDown);
다음 UXML 예시에서는 TextField를 생성합니다.
[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/TextFieldSnippet.uxml)]
다음 C# 예시에서는 커스터마이즈 가능한 일부 TextField 기능을 보여 줍니다.
[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/TextFieldSnippet.cs#sample)]
이 예시를 Unity에서 실험해 보려면 Window > UI Toolkit > Samples로 이동합니다.
C# 클래스:TextField
네임스페이스:UnityEngine.UIElements
기본 클래스:TextInputBaseField_1
이 요소에는 다음 구성원 속성이 있습니다.
| Name | 타입 | 설명 |
|---|---|---|
multiline |
boolean |
true로 설정하면 textfield에 여러 줄을 허용하고, false로 설정하면 허용하지 않습니다. |
value |
string |
현재 필드에 의해 노출된 문자열입니다. |
이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.
| Name | 타입 | 설명 |
|---|---|---|
auto-correction |
boolean |
터치 스크린 키보드 자동 수정을 켤지 끌지 결정합니다. |
binding-path |
string |
바인드될 타겟 프로퍼티의 경로입니다. |
emoji-fallback-support |
boolean |
텍스트를 렌더링할 때 시스템에서 이모티콘 문자를 찾는 순서를 지정합니다. 이 설정을 활성화하면 전역 Emoji Fallback 목록에서는 유니코드 14.0 표준에서 이모티콘으로 정의된 문자를 먼저 검색합니다. |
focusable |
boolean |
요소에 포커스를 맞출 수 있으면 true입니다. |
hide-mobile-input |
boolean |
모바일 입력 필드를 숨기거나 표시합니다. |
is-delayed |
boolean |
true로 설정하면 사용자가 Enter 키를 누르거나 텍스트 필드가 포커스를 벗어날 때까지 값 프로퍼티가 업데이트되지 않습니다. |
keyboard-type |
TouchScreenKeyboardType |
사용하게 될 모바일 키보드 타입입니다. |
label |
string |
필드 옆에 표시될 레이블을 나타내는 문자열입니다. |
max-length |
int |
필드에 대한 최대 문자수입니다. |
select-all-on-focus |
boolean |
포커스를 받을 때 요소의 콘텐츠가 선택되는지 여부를 제어합니다. |
select-all-on-mouse-up |
boolean |
첫 마우스 눌림 해제 시 요소의 콘텐츠가 선택되는지 여부를 제어합니다. |
tabindex |
int |
포커스 링에서 포커스를 맞출 수 있는 항목을 정렬하는 데 사용되는 정수입니다.0보다 크거나 같아야 합니다. |
value |
string |
필드와 연결된 값입니다. |
vertical-scroller-visibility |
UIElements.ScrollerVisibility |
TextInputBaseField_1에서 세로 스크롤 바의 표시 여부를 제어하는 옵션입니다. |
또한 이 요소는 다음 속성을 VisualElement에서 상속합니다.
| Name | 타입 | 설명 |
|---|---|---|
content-container |
string |
자식 요소가 추가되며, 일반적으로 요소 자체와 동일합니다. |
data-source |
Object |
상속된 모든 데이터 소스를 오버라이드하는 이 VisualElement에 데이터 소스를 할당합니다. 이 데이터 소스는 모든 자식에게 상속됩니다. |
data-source-path |
string |
데이터 소스에서 값까지의 경로입니다. |
name |
string |
이 VisualElement의 이름입니다. 이 프로퍼티를 사용하면 특정 요소를 타게팅하는 USS 선택자를 작성할 수 있습니다.요소에 고유한 이름을 부여하는 것이 표준 관행입니다. |
picking-mode |
UIElements.PickingMode |
mouseEvents 또는 IPanel.Pick 쿼리 중에 이 요소를 선택할 수 있는지를 결정합니다. |
style |
string |
이 요소의 스타일 오브젝트에 대한 레퍼런스입니다. USS 파일에서 계산된 데이터 또는 C#에서 이 오브젝트에 작성된 인라인 스타일을 포함합니다. |
tooltip |
string |
사용자가 마우스를 요소 위에 잠시 놓은 후 정보 박스 안에 표시할 텍스트입니다.이는 에디터 UI에서만 지원됩니다. |
usage-hints |
UIElements.UsageHints |
VisualElement에 대한 고수준의 의도된 사용 패턴을 지정하는 힌트 값 조합입니다.이 프로퍼티는 VisualElement가 아직 Panel에 포함되어 있지 않을 때만 설정할 수 있습니다.Panel에 포함되면 이 프로퍼티는 사실상 읽기 전용이 되며, 변경을 시도하면 예외가 발생합니다.적절한 UsageHints를 지정하면 시스템에서 예상하는 사용 패턴에 따라 특정 작업을 처리하거나 가속하는 방법에 대해 더 나은 결정을 내릴 수 있습니다.이러한 힌트는 동작이나 시각적 결과에는 영향을 주지 않으며 패널과 그 안의 요소의 전반적인 성능에만 영향을 줍니다.항상 적절한 UsageHints를 지정하는 것이 좋지만, 일부 UsageHints는 특정 조건(예: 타겟 플랫폼의 하드웨어 제한으로 인해)에서 내부적으로 무시될 수 있다는 점에 유의하십시오. |
view-data-key |
string |
트리 확장 상태, 스크롤 위치, 줌 레벨 등의 데이터 지속성을 확인하는 데 사용됩니다. 이 키는 뷰 데이터 스토어에서 뷰 데이터를 저장 및 로드하는 데 사용됩니다. 이 키를 설정하지 않은 경우 관련 VisualElement에 대해 지속성이 비활성화됩니다. 자세한 내용은 데이터 지속성 확인을 참조하십시오. |
다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.
| C# 프로퍼티 | USS 선택자 | 설명 |
|---|---|---|
ussClassName |
.unity-text-field |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-text-field__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-text-field__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
ussClassName |
.unity-base-text-field |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-base-text-field__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-base-text-field__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
singleLineInputUssClassName |
.unity-base-text-field__input--single-line |
이 타입의 요소에 있는 단일 줄 입력 요소의 USS 클래스명입니다. |
multilineInputUssClassName |
.unity-base-text-field__input--multiline |
이 타입의 요소에 있는 여러 줄 입력 요소의 USS 클래스명입니다. |
placeholderUssClassName |
.unity-base-text-field__input--placeholder |
플레이스홀더 텍스트가 표시될 경우 입력 요소의 USS 클래스명입니다. |
ussClassName |
.unity-base-field |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-base-field__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-base-field__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
noLabelVariantUssClassName |
.unity-base-field--no-label |
레이블이 없는 경우 이 타입 요소의 USS 클래스명입니다. |
labelDraggerVariantUssClassName |
.unity-base-field__label--with-dragger |
연결된 드래거가 있는 경우 이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
mixedValueLabelUssClassName |
.unity-base-field__label--mixed-value |
혼합된 값을 표시하는 요소의 USS 클래스명입니다. |
alignedFieldUssClassName |
.unity-base-field__aligned |
인스펙터 요소에 정렬된 요소의 USS 클래스명입니다. |
disabledUssClassName |
.unity-disabled |
비활성화된 로컬 요소의 USS 클래스명입니다. |
또한 인스펙터 또는 UI 툴킷 디버거의 매칭 선택자 섹션을 사용하여 해당 계층 구조의 모든 레벨에서 VisualElement 컴포넌트에 영향을 주는 USS 선택자를 확인할 수도 있습니다.
다음 표에서는 USS의 TextField 요소에만 사용할 수 있는 커스텀 프로퍼티에 대해 간략하게 설명합니다.
| 프로퍼티 | 타입 | 설명 |
|---|---|---|
--unity-cursor-color |
문자열 | 텍스트 삽입 기호의 컬러 코드입니다. |
--unity-selection-color |
문자열 | 선택한 텍스트의 컬러 코드입니다. |