Power Apps의 단추 컨트롤

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

Description

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

키 속성

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

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

추가 속성

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

AutoDisableOnSelect – OnSelect 동작이 실행되는 동안 컨트롤을 자동으로 사용하지 않도록 설정합니다.

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

BorderStyle – 컨트롤의 테두리가 Solid, Dashed, Dotted 또는 None인지 여부입니다.

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

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

ContentLanguage - 컨트롤의 컨테이너와 다른 경우 컨트롤 콘텐츠의 언어입니다.

DisplayMode – 컨트롤에서 사용자 입력(편집)을 허용하는지 여부, 데이터만 표시(보기) 또는 사용 안 함(사용 안 함)입니다.

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

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

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

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

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

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

글꼴 – 텍스트가 표시되는 글꼴 패밀리의 이름입니다.

FontWeight – 컨트롤에 있는 텍스트의 가중치: 굵게, 세미볼드, 노멀 또는 라이터.

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

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 유지할 때 컨트롤의 테두리 색입니다.

HoverColor – 사용자가 마우스 포인터를 유지할 때 컨트롤의 텍스트 색입니다.

HoverFill – 사용자가 마우스 포인터를 유지할 때 컨트롤의 배경색입니다.

기울임꼴 – 컨트롤의 텍스트가 기울임꼴인지 여부입니다.

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

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

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

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

누름 – 컨트롤을 누르는 동안 True 이고, 그렇지 않으면 false 입니다.

PressedBorderColor – 사용자가 해당 컨트롤을 탭하거나 클릭할 때 컨트롤의 테두리 색입니다.

PressedColor – 사용자가 해당 컨트롤을 탭하거나 클릭할 때 컨트롤의 텍스트 색입니다.

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

RadiusBottomLeft – 컨트롤의 왼쪽 아래 모서리가 반올림되는 정도입니다.

RadiusBottomRight – 컨트롤의 오른쪽 아래 모서리가 반올림되는 정도입니다.

RadiusTopLeft – 컨트롤의 왼쪽 위 모서리가 반올림되는 정도입니다.

RadiusTopRight – 컨트롤의 오른쪽 위 모서리가 반올림되는 정도입니다.

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

취소선 – 컨트롤에 나타나는 텍스트를 통해 선이 표시되는지 여부입니다.

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

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

밑줄 – 컨트롤에 표시되는 텍스트 아래에 줄이 표시되는지 여부입니다.

VerticalAlign – 해당 컨트롤의 세로 중심과 관련하여 컨트롤의 텍스트 위치입니다.

표시 – 컨트롤이 표시되는지 숨겨지는지 여부입니다.

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

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

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

관련 함수

Navigate( ScreenName, ScreenTransitionValue )

예시

단추에 기본 수식 추가

1. Text input 컨트롤을 추가하고 이름을 Source로 지정합니다.

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

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

   UpdateContext 함수 또는 기타 함수에 대한 자세한 정보를 원하십니까?

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

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

   레이블 컨트롤에 입력한 번호가 표시됩니다.

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

   레이블 컨트롤은 입력한 두 숫자의 합계를 보여 줍니다.

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

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

여러 수식을 사용하여 단추 구성

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

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

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

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

   비고

   여러 수식을 세미콜론 ";"으로 구분합니다.

3. Source의 Default 속성을 ClearInput으로 설정합니다.

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

합계를 다시 설정하는 다른 단추 추가

두 번째 단추를 추가하여 계산 간의 합계를 지웁니다.

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

   UpdateContext({Total:0})

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

단추의 모양 변경

단추의 도형 변경

기본적으로 Power Apps는 둥근 모서리가 있는 사각형 단추 컨트롤을 만듭니다. 높이, 너비 및 반지름 속성을 설정하여 단추 컨트롤의 모양을 기본적으로 수정할 수 있습니다.

1. 단추 컨트롤을 추가하고 높이 및 너비 속성을 300으로 설정하여 큰 정사각형 단추를 만듭니다.

2. RadiusTopLeft, RadiusTopRight, RadiusBottomLeft 및 RadiusBottomRight 속성을 수정하여 각 모서리의 곡률 크기를 조정합니다. 다음은 각각 300 x 300 정사각형 단추에서 시작하는 다양한 셰이프의 몇 가지 예입니다.

   • 4개의 반지름 값을 모두 150 으로 설정하여 원을 만듭니다.
   • RadiusTopLeft 및 RadiusBottomRight의 값을 300으로 설정하여 리프 모양의 단추를 만듭니다.
   • RadiusTopLeft 및 RadiusTopRight의 값을 300으로 설정하고 RadiusBottomLeft 및 RadiusBottomRight 값을 100으로 설정하여 탭 모양의 단추를 만듭니다.

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

기본적으로 마우스로 마우스로 마우스를 가리키면 단추 컨트롤의 채우기 색이 20% 흐리게 표시됩니다. ColorFade 함수를 사용하는 HoverFill 속성을 변경하여 이 동작을 조정할 수 있습니다. ColorFade 수식을 양수 백분율로 설정하면 단추 위로 마우스를 가져가면 색이 더 밝아지고 음수 비율은 색을 더 어둡게 만듭니다.

• 만든 단추 중 하나의 HoverFill 속성에서 ColorFade 백분율을 변경하고 효과를 관찰합니다.

ColorValue("Red")와 같이 HoverFill 속성을 ColorFade 함수 대신 ColorValue 함수가 포함된 수식으로 설정하여 단추 컨트롤의 색을 지정할 수도 있습니다.

• ColorFade 함수를 만든 단추 중 하나에서 ColorValue 함수로 바꾸고 효과를 관찰합니다.

내게 필요한 옵션 지침

색 대비

• 표준 색 대비 요구 사항이 적용됩니다 .

화면 읽기 프로그램 지원

• 텍스트 가 있어야 합니다.

키보드 지원

• TabIndex 는 키보드 사용자가 탐색할 수 있도록 0 이상이어야 합니다.
• 포커스 표시기를 명확하게 표시해야 합니다. 이 작업을 수행하려면 FocusedBorderColor 및 FocusedBorderThickness 를 사용합니다.