Power Apps의 버튼 컨트롤

사용자가 클릭하거나 탭하여 앱과 상호 작용할 수 있는 컨트롤입니다.

설명

버튼 컨트롤의 OnSelect 속성을 구성하여 사용자가 컨트롤을 클릭하거나 탭할 때 하나 이상의 수식을 실행합니다.

키 속성

OnSelect – 사용자가 컨트롤을 탭하거나 클릭할 때 수행할 작업입니다.

Text – 컨트롤에 표시되는 텍스트 또는 사용자가 컨트롤에 입력하는 텍스트입니다.

추가 속성

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.

AutoDisableOnSelectOnSelect 동작이 실행 중일 때 컨트롤을 자동으로 비활성화합니다.

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

BorderStyle – 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.

BorderThickness – 컨트롤의 테두리 굵기입니다.

Color – 컨트롤의 텍스트 색입니다.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.

Fill – 컨트롤의 배경색입니다.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.

FontWeight - 컨트롤의 텍스트 굵기입니다. Bold, Semibold, Normal 또는 Lighter입니다.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 하단 가장자리 사이의 거리입니다.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 상단 가장자리 사이의 거리입니다.

Pressed – 컨트롤을 누르고 있으면 true이고, 그렇지 않으면 false입니다.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.

RadiusBottomLeft – 컨트롤 왼쪽 아래 모서리의 둥근 정도입니다.

RadiusBottomRight – 컨트롤 오른쪽 아래 모서리의 둥근 정도입니다.

RadiusTopLeft – 컨트롤 왼쪽 위 모서리의 둥근 정도입니다.

RadiusTopRight – 컨트롤 오른쪽 위 모서리의 둥근 정도입니다.

Size – 컨트롤에 표시되는 텍스트의 글꼴 크기입니다.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.

Tooltip – 사용자가 컨트롤을 마우스로 가리킬 때 나타나는 설명 텍스트입니다.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.

VerticalAlign – 컨트롤의 세로 가운데를 기준으로 한 텍스트의 위치입니다.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.

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

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

Navigate( ScreenName, ScreenTransitionValue )

예제

단추에 기본 수식 추가

  1. 텍스트 입력 컨트롤을 추가하고 이름을 Source로 지정합니다.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?

  2. 버튼 컨트롤을 추가하고 Text 속성을 "Add"로 설정하고 OnSelect 속성을 다음 수식으로 설정합니다.
    UpdateContext({Total:Total + Value(Source.Text)})

    UpdateContext 함수 또는 다른 함수에 대해 더 알고 싶으신가요?

  3. 레이블 컨트롤을 추가하고 수식 입력 줄의 Text 속성을 값(합계) 로 설정 한 다음 F5를 누릅니다.

  4. 원본에서 기본 텍스트를 지우고 그 안에 숫자를 입력한 다음 추가를 클릭하거나 탭합니다.

    레이블 컨트롤이 입력한 숫자를 보여 줍니다.

  5. 원본에서 숫자를 지우고 그 안에 다른 숫자를 입력한 다음 추가를 클릭하거나 탭합니다.

    레이블 컨트롤이 입력한 두 숫자의 합계를 표시합니다.

  6. (선택 사항) 이전 단계를 한 번 이상 반복합니다.

  7. 기본 작업 영역으로 돌아가려면 Esc를 누릅니다(또는 오른쪽 위 모서리에 있는 닫기 아이콘을 클릭하거나 탭합니다).

여러 수식으로 단추 구성

입력 사이에 텍스트 입력 컨트롤을 지우는 수식을 추가합니다.

  1. 원본HintText 속성을 "숫자 입력"으로 설정합니다.

  2. 추가OnSelect 속성을 이 수식으로 설정합니다.

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    참고

    여러 수식은 세미콜론 “;”으로 구분합니다.

  3. 원본Default 속성을 ClearInput으로 설정합니다.

  4. F5 키를 누른 다음 여러 숫자를 동시에 추가하여 앱을 테스트합니다.

총계를 재설정하는 다른 단추 추가

계산 사이에 합계를 지우는 두 번째 단추를 추가합니다.

  1. 다른 버튼 컨트롤을 추가하고 Text 속성을 "Clear"로 설정하고 OnSelect 속성을 다음 수식으로 설정합니다.

    UpdateContext({Total:0})

  2. F5를 누르고 여러 숫자를 함께 추가한 다음 지우기를 클릭하거나 탭하여 총계를 재설정합니다.

단추의 모양 변경

단추 모양 변경

기본적으로 Power Apps는 모서리가 둥근 직사각 버튼 컨트롤을 만듭니다. 버튼 컨트롤의 Height, WidthRadius 속성을 설정하여 기본적인 모양을 수정할 수 있습니다.

참고

아이콘 및 모양는 다양한 디자인을 제공하며 버튼 컨트롤이 수행하는 것과 동일한 기본 함수 중 일부를 수행할 수 있습니다. 그러나 아이콘 및 모양 에는 Text 속성이 없습니다.

  1. 버튼 컨트롤을 추가하고 HeightWidth 속성을 300으로 설정하여 큰 정사각 단추를 만듭니다.

  2. RadiusTopLeft, RadiusTopRight, RadiusBottomLeftRadiusBottomRight 속성을 수정하여 각 모서리의 곡률 정도를 조절합니다. 각각 300 x 300 정사각 단추에서 시작하는 다양한 셰이프의 예는 다음과 같습니다.

마우스로 가리킬 때 단추의 색 변경

기본적으로 버튼 컨트롤의 채우기 색은 마우스로 가리킬 때 20% 흐려집니다. ColorFade 함수를 사용하는 HoverFill 속성을 변경하여 이 동작을 조정할 수 있습니다. ColorFade 수식을 양의 백분율로 설정하면 마우스를 단추에 가져갔을 때 색이 더 밝아지며 음수로 설정하면 더 어두워집니다.

  • 만든 단추 중 하나의 HoverFill 속성에서 ColorFade 를 변경하고 결과를 확인합니다.

ColorValue("Red") 에서처럼 ColorFade 함수 대신 HoverFill 속성을 ColorValue 함수가 포함된 수식으로 설정하여 버튼 색을 지정할 수도 있습니다.

참고

색 값은 이름 또는 16진 값의 CSS 색 정의가 될 수 있습니다.

  • 만든 버튼 중 하나에서 ColorFade 함수를 ColorValue 함수로 대체하고 결과를 확인합니다.

접근성 지침

색 대비

스크린 리더 지원

  • Text 가 있어야 합니다.

키보드 지원

  • 키보드 사용자가 탐색할 수 있도록 TabIndex 가 0 이상이어야 합니다.
  • 포커스 표시기가 명확하게 표시되어야 합니다. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).