캔버스 앱의 단추 최신 컨트롤

Button 최신 컨트롤은 캔버스 앱에서 작업을 트리거하는 클릭 가능한 요소를 제공하여 유연한 스타일 지정 및 포괄적인 상호 작용 기능을 제공합니다.

Description

Button 최신 컨트롤은 선택할 때 앱 논리를 트리거하는 클릭 가능한 요소를 제공합니다. 양식 제출, 탐색, 확인 및 사용자 입력이 필요한 모든 상호 작용에 사용합니다. 컨트롤은 Fluent 테마를 통해 아이콘 및 텍스트 조합, 전체 글꼴 스타일 및 여러 모양 스타일을 지원합니다. 이 컨트롤의 주요 속성은 텍스트, 모양 및 OnSelect입니다.

일반

텍스트 – 단추에 표시되는 레이블입니다. 문자열로 계산되는 모든 텍스트 또는 Power Fx 수식을 지원합니다. 단추 텍스트를 설정하거나 변경하려면 이 속성을 사용합니다.

표시 – 컨트롤이 표시되는지 숨겨지는지 여부입니다. Power Fx 수식을 사용하여 앱 상태에 따라 단추를 표시하거나 숨깁니다.

작동 방식

OnSelect – OnSelect 속성을 사용하여 단추를 선택할 때 발생하는 작업을 정의합니다. 사용자가 단추를 선택할 때 앱이 응답하는 방식입니다. 컨트롤에 액세스할 수 있습니다. 컨트롤에 키보드 포커스가 있는 동안 사용자가 Enter 또는 Space를 누르면 OnSelect 가 트리거됩니다.

DisplayMode – 컨트롤에서 사용자 입력(편집)을 허용하는지 여부, 데이터만 표시(보기) 또는 사용 안 함(사용 안 함)입니다. 사용 안 함으로 설정하면 단추가 시각적으로 흐리게 표시되고 OnSelect가 실행되지 않습니다.

시작하기

단추 최신 컨트롤은 Power Apps에서 가장 일반적으로 사용되는 컨트롤 중 하나입니다. 단추의 핵심에는 사용자가 보는 텍스트( 텍스트 속성) 및 선택할 때 발생하는 작업( OnSelect 속성)의 두 가지 필수 요소가 있습니다. 이러한 기본 사항을 이해하면 사용자 입력에 응답하는 대화형 앱을 만들 수 있습니다.

단추 텍스트 설정

단추에 표시되는 텍스트를 변경하려면 Text 속성을 설정합니다.

• 속성 창: 텍스트 필드에 직접 텍스트 입력
• 수식 사용: Text = "Click Me" 또는 Text = "Save " & TextInput1.Text

대화형 단추 만들기

사용자가 OnSelect 속성을 사용하여 단추를 선택할 때 발생하는 작업을 정의합니다.

1. 앱에서 단추를 선택합니다.
2. 속성 창에서 OnSelect 속성을 찾습니다.
3. Power Fx 수식을 입력합니다(예: Navigate(NextScreen).).

단추 속성 구성

Power Apps는 컨트롤을 편집하기 위해 간소화된 접근 방식을 사용합니다.

• 캔버스에서 단추를 선택합니다.
  • 오른쪽의 속성 창을 사용하여 기본 속성을 수정합니다.
  • 고급 수식의 경우 맨 위에 있는 수식 입력줄을 사용합니다.
  • 자세한 사용자 지정을 위해 고급 속성으로 전환합니다.

크기 및 위치

X – 컨트롤의 왼쪽 가장자리와 부모 컨테이너의 왼쪽 가장자리 사이의 거리입니다(부모 컨테이너가 없는 경우 화면).

Y – 컨트롤의 위쪽 가장자리와 부모 컨테이너의 위쪽 가장자리 사이의 거리입니다(부모 컨테이너가 없는 경우 화면).

너비 – 컨트롤의 왼쪽 가장자리와 오른쪽 가장자리 사이의 거리입니다. 기본값은 96입니다.

높이 – 컨트롤의 위쪽 가장자리와 아래쪽 가장자리 사이의 거리입니다. 기본값은 32입니다.

맞춤 – 컨트롤 내에서 단추 콘텐츠의 가로 맞춤입니다. 열거형 값을 허용합니다 AlignAlign.LeftAlign.CenterAlign.RightAlign.Justify.

VerticalAlign – 단추 콘텐츠의 세로 맞춤입니다. 열거형 값을 허용합니다 VerticalAlignVerticalAlign.TopVerticalAlign.MiddleVerticalAlign.Bottom.

PaddingTop – 단추 콘텐츠와 컨트롤의 위쪽 가장자리 사이의 거리입니다.

PaddingBottom – 단추 내용과 컨트롤의 아래쪽 가장자리 사이의 거리입니다.

PaddingLeft – 단추 내용과 컨트롤의 왼쪽 가장자리 사이의 거리입니다.

PaddingRight – 단추 내용과 컨트롤의 오른쪽 가장자리 사이의 거리입니다.

스타일 및 테마

모양 – 단추의 비주얼 스타일입니다. 열거형 값을 허용합니다.ButtonAppearance

BasePaletteColor – 컨트롤의 색상표를 생성하기 위해 테마에서 사용하는 기본 색입니다. 단추에 다른 테마 색을 적용하려면 이 속성을 변경합니다.

아이콘 – 단추 텍스트(예"Add": , ,"Save""Delete")와 함께 표시할 Fluent 아이콘 이름입니다. 텍스트 전용 단추의 경우 비워 둡니다.

IconStyle – 아이콘이 윤곽선 또는 채워진 스타일로 렌더링되는지 여부입니다. IconStyle 열거형 값 IconStyle.Outline (기본값) 또는 IconStyle.Filled.

IconRotation – 아이콘에 적용된 각도로 회전합니다. 기본값은 0입니다.

레이아웃 – 단추 텍스트를 기준으로 하는 아이콘의 위치입니다. 열거형 값을 허용합니다.ButtonLayout

글꼴 – 단추 레이블에 사용되는 글꼴 패밀리입니다.

크기 – 단추 레이블의 글꼴 크기(포인트)입니다.

색 – 단추 레이블 텍스트의 색입니다.

FontWeight – 단추 레이블의 두께(두께)입니다. 열거형 값을 허용합니다FontWeight. , FontWeight.Bold( FontWeight.Semibold 기본값), FontWeight.Normal. FontWeight.Lighter

기울임꼴 – 단추 레이블이 기울임꼴 스타일로 표시되는지 여부입니다.

밑줄 – 단추 레이블 텍스트 아래에 선이 표시되는지 여부입니다.

취소선 – 단추 레이블 텍스트의 가운데에 선이 표시되는지 여부입니다.

BorderColor – 컨트롤의 테두리 색입니다.

BorderStyle – 컨트롤 테두리의 스타일입니다. 열거형 값( BorderStyle, , BorderStyle.SolidBorderStyle.Dashed또는 BorderStyle.Dotted.)을 허용합니다BorderStyle.None.

BorderThickness – 컨트롤 테두리의 두께(픽셀)입니다.

RadiusTopLeft – 컨트롤의 왼쪽 위 모서리에 대한 모퉁이 반경입니다.

RadiusTopRight – 컨트롤의 오른쪽 위 모서리에 대한 모퉁이 반경입니다.

RadiusBottomLeft – 컨트롤의 왼쪽 아래 모서리에 대한 모퉁이 반경입니다.

RadiusBottomRight – 컨트롤의 오른쪽 아래 모서리에 대한 모퉁이 반경입니다.

추가 속성

AccessibleLabel – 화면 읽기 프로그램에서 읽은 레이블입니다. 단추 레이블만으로는 충분하지 않은 경우(예: 아이콘 전용 단추를 사용하는 경우) 의미 있는 설명을 제공합니다.

도구 설명 – 사용자가 단추를 마우스로 가리킬 때 표시되는 설명 텍스트입니다.

ContentLanguage – 앱 언어와 다른 경우 컨트롤 콘텐츠의 표시 언어입니다.

Example

다음 YAML 예제에서는 제출 단추와 OnSelect 작업이 있는 취소 단추를 보여 줍니다.

- SubmitButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Submit"
      OnSelect: |
        SubmitForm(DataForm1);
        Navigate(SuccessScreen)
      Appearance: =ButtonAppearance.Primary
      Icon: ="Checkmark"
      IconStyle: =IconStyle.Outline
      Layout: =ButtonLayout.IconBefore
      AccessibleLabel: ="Submit the form"
      Tooltip: ="Submit your response"
      Width: =120
      Height: =36

- CancelButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Cancel"
      OnSelect: =Navigate(HomeScreen)
      Appearance: =ButtonAppearance.Outline
      Width: =120
      Height: =36

일반적인 단추 패턴

일반적인 단추 구현은 다음과 같습니다.

탐색 단추:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

데이터 제출:

OnSelect = SubmitForm(Form1); Notify("Data saved!", NotificationType.Success)

변수 업데이트:

OnSelect = Set(IsVisible, !IsVisible)

확인 대화 상자:

OnSelect = If(
    Confirm("Are you sure you want to delete this item?"),
    Remove(Collection1, ThisItem)
)

최근 업데이트

업데이트된 버전의 Button 최신 컨트롤에는 다음과 같은 향상된 기능과 동작 변경 내용이 포함되어 있습니다.

속성 이름 바꾸기

다음 속성의 이름이 바뀝니다. 앱에서 이전 속성 이름을 참조하는 수식을 업데이트합니다.

제거된 속성

버그 수정 및 개선

• 업데이트된 열거형: Appearance이제 LayoutIconStyle 문자열 값 대신 형식화된 Power Fx 열거형(ButtonAppearance, ButtonLayout, IconStyle)을 사용하여 IntelliSense를 개선하고 수식 오류를 줄입니다.
• 도구 설명 지원: 새 Tooltip 속성은 호버에 설명 텍스트를 표시합니다.
• 테두리 개선 사항: 추가되었으며 BorderStyle 보다 정확한 테두리 제어를 위해 추가되었습니다BorderThickness. 4개의 코너별 속성이 독립적인 코너 컨트롤로 대체 BorderRadius 됩니다.
• 전체 글꼴 컨트롤: 이제 글꼴 속성이 다른 최신 컨트롤과 일치합니다. , Font, Size, ColorItalic및 Underline를 사용합니다Strikethrough.

또한, 다음을 참조하세요.

• 최신 컨트롤 개요
• 크기 및 위치 속성