UXML 요소 Button

Button 요소를 사용하여 UI에서 클릭 가능한 버튼을 만듭니다.예를 들어 사용자가 Button 요소를 클릭하거나 탭하면 새 창 열기, 양식 제출 또는 음향 효과 재생과 같은 작업 또는 이벤트가 트리거됩니다.

Button 생성

UI Builder, UXML, C#으로 Button을 생성할 수 있습니다. 다음 C# 예시에서는 레이블이 있는 Button을 생성합니다.

var button = new Button(() => { Debug.Log("Button clicked"); }) { text = "Click me" };

Button에 아이콘 추가

프로젝트에 있는 텍스처, 렌더 텍스처, 스프라이트 또는 벡터 이미지 에셋과 같은 아이콘을 통합하여 Button을 시각적으로 개선할 수 있습니다. 이미지 에셋을 참조하는 방법은 에셋을 참조하십시오.

UI Builder로 Button에 아이콘을 추가하려면 다음을 수행합니다.

• Button의 인스펙터 탭에서 Icon Image 드롭다운 목록 중 원하는 아이콘을 선택합니다.
• 또는 Assets 창에서 Button의 인스펙터 탭에 있는 Icon Image 필드로 아이콘을 드래그합니다.

UXML로 Button에 아이콘을 추가하려면 icon-image 속성에 이미지 소스를 제공합니다.

<ui:Button name="Button" text="Button text" icon-image="/path/to/image-file.png" />

C#으로 Button에 아이콘을 추가하려면 이미지 소스를 iconImage 프로퍼티에 할당합니다.

Button myButton = new Button();
var buttonIconImage = Resources.Load<Texture2D>("image-file");

myButton.text = "Button text";
myButton.iconImage = buttonIconImage;

Button 아이콘 위치 변경

Button에 아이콘을 추가하면 Button에 두 개의 읽기 전용 하위 요소가 추가됩니다.

• 아이콘 이미지를 정의하는 Image 요소
• 버튼 텍스트를 정의하는 TextElement

하위 요소를 편집할 수는 없지만 Button 요소의 USS flex-direction 프로퍼티를 사용하여 레이아웃을 변경할 수는 있습니다. 기본적으로 아이콘이 버튼 텍스트의 왼쪽에 추가됩니다.

버튼 아이콘의 위치를 조정하려면 다음과 같이 Button의 flex-direction을 조정합니다.

• 아이콘을 버튼 텍스트의 오른쪽으로 전환하려면 row-reverse로 설정합니다.
• 아이콘을 버튼 텍스트의 위로 옮기려면 column으로 설정합니다.
• 아이콘을 버튼 텍스트의 아래에 배치하려면 column-reverse로 설정합니다.

Button의 하위 요소 사용

Button 요소를 사용하면 text, iconImage 프로퍼티 및 background-image 스타일 프로퍼티를 사용하여 사용자에게 추가 정보를 제공할 수 있습니다. 해당 요소의 모양과 동작을 보다 세밀하게 제어하려는 경우, 다른 시각적 요소와 마찬가지로 Button의 계층 구조에 Label이나 Image와 같은 하위 요소를 추가하여 사용자에게 추가 정보를 제공할 수도 있습니다.

일반적으로 다음 상황에서 하위 요소를 사용합니다.

• 커스터마이징:하위 요소를 사용하면 각 개별 요소의 모양과 동작을 개별적으로 커스터마이즈할 수 있습니다.예를 들어 레이블 텍스트에 커스텀 폰트나 컬러를 사용하거나 이미지에 특정 애니메이션을 추가할 수 있습니다.버튼에 이미지 요소를 추가할 때 씬에서 직접 요소를 추가할 수 있습니다.또한 이미지 요소는 스케일 모드와 반복 모드도 지원합니다.
• 동적 콘텐츠:레이블 또는 이미지의 콘텐츠가 동적인 경우 하위 요소를 사용하면 버튼의 다른 프로퍼티에 영향을 주지 않고 각 요소의 콘텐츠를 개별적으로 업데이트할 수 있습니다.
• 상호작용:사용자가 버튼의 다른 요소는 클릭하지 않고 레이블만 클릭하여 동작을 트리거하도록 허용하는 등 버튼 내의 특정 요소에 상호 작용을 추가하려는 경우 하위 요소를 사용하면 됩니다.

프로퍼티는 다음 목적으로 사용합니다.

• 간단한 디자인:버튼의 디자인이 단순하고 커스터마이징이나 동적 콘텐츠가 필요하지 않은 경우 프로퍼티를 사용하는 것이 좋습니다.
• 성능:UI에 버튼이 많은 경우 각 버튼에 하위 요소를 사용하면 성능에 부정적인 영향을 줄 수 있습니다.이 경우 프로퍼티를 사용하여 버튼의 모양을 설정하는 것이 더 효율적입니다.
• 일관성:UI 전체에서 일관성을 유지하려는 경우 프로퍼티를 사용하면 모든 버튼의 모양과 동작이 일관되게 유지됩니다.

예제

다음 UXML 예시에서는 Button을 생성합니다.

[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/ButtonSnippet.uxml)]

다음 C# 예시에서는 Button의 커스터마이즈 가능한 일부 기능을 보여 줍니다.

[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/ButtonSnippet.cs#sample)]

이 예시를 Unity에서 실험해 보려면 Window > UI Toolkit > Samples로 이동합니다.

C# 기본 클래스 및 네임스페이스

C# 클래스:Button
네임스페이스:UnityEngine.UIElements
기본 클래스:TextElement

구성원 UXML 속성

이 요소에는 다음 구성원 속성이 있습니다.

Name	타입	설명
icon-image	Object	버튼 요소에서 아이콘을 표시하는 텍스처, 스프라이트 또는 VectorImage입니다.

상속 UXML 속성

이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.

Name	타입	설명
binding-path	string	바인드될 타겟 프로퍼티의 경로입니다.
display-tooltip-when-elided	boolean	true인 경우 툴팁에 생략된 텍스트의 전체 버전이 표시되며, 이전에 툴팁이 제공된 경우에도 덮어쓰기됩니다.
emoji-fallback-support	boolean	텍스트를 렌더링할 때 시스템에서 이모티콘 문자를 찾는 순서를 지정합니다. 이 설정을 활성화하면 전역 Emoji Fallback 목록에서는 유니코드 14.0 표준에서 이모티콘으로 정의된 문자를 먼저 검색합니다.
enable-rich-text	boolean	false인 경우 리치 텍스트 태그가 파싱되지 않습니다.
focusable	boolean	요소에 포커스를 맞출 수 있으면 true입니다.
parse-escape-sequences	boolean	이스케이프 시퀀스를 그대로 표시할지, 아니면 표시되는 문자로 대체할지 여부를 지정합니다.
tabindex	int	포커스 링에서 포커스를 맞출 수 있는 항목을 정렬하는 데 사용되는 정수입니다.0보다 크거나 같아야 합니다.
text	string	표시할 텍스트입니다. 이 값을 변경하면 암시적으로 INotifyValueChanged_1.value 세터가 호출되며, 이에 따라 유형 문자열의 ChangeEvent_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에 대해 지속성이 비활성화됩니다. 자세한 내용은 데이터 지속성 확인을 참조하십시오.

USS 클래스

다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.

C# 프로퍼티	USS 선택자	설명
ussClassName	.unity-button	이 타입 요소의 USS 클래스명입니다. Unity는 이 USS 클래스를 버튼 요소의 모든 인스턴스에 추가합니다.이 클래스에 적용된 모든 스타일링은 시각적 트리의 스타일시트 옆이나 아래에 있는 모든 버튼에 영향을 줍니다.
iconUssClassName	.unity-button--with-icon	아이콘이 있는 버튼 요소에 대한 USS 클래스명입니다. 인스턴스의 Button.iconImage 프로퍼티에 유효한 텍스처가 포함된 경우 Unity는 이 USS 클래스를 버튼 요소의 인스턴스에 추가합니다. 이 클래스에 적용된 모든 스타일은 아이콘이 비주얼 트리의 스타일시트 옆이나 아래에 위치한 모든 버튼에 영향을 미칩니다.
ussClassName	.unity-text-element	이 타입 요소의 USS 클래스명입니다.
selectableUssClassName	.unity-text-element__selectable	선택 가능한 텍스트 요소의 USS 클래스명입니다.
disabledUssClassName	.unity-disabled	비활성화된 로컬 요소의 USS 클래스명입니다.

또한 인스펙터 또는 UI 툴킷 디버거의 매칭 선택자 섹션을 사용하여 해당 계층 구조의 모든 레벨에서 VisualElement 컴포넌트에 영향을 주는 USS 선택자를 확인할 수도 있습니다.

추가 리소스

• UXML 요소 이미지
• UXML 요소 TextElement
• UXML 요소 ToggleButtonGroup