PowerApps의 단추 컨트롤Button control in PowerApps

사용자가 클릭하거나 탭하여 앱과 상호 작용할 수 있는 컨트롤입니다.A control that the user can click or tap to interact with the app.

설명Description

단추 컨트롤의 OnSelect 속성을 구성하여 사용자가 컨트롤을 클릭하거나 탭할 때 하나 이상의 수식을 실행합니다.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

주요 속성Key properties

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

Text – 컨트롤에 표시되는 텍스트 또는 사용자가 컨트롤에 입력하는 텍스트입니다.Text – Text that appears on a control or that the user types into a control.

추가 속성Additional properties

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelectOnSelect 동작이 실행 중일 때 컨트롤을 자동으로 비활성화합니다.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

FocusedBorderThickness - 키보드 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

FontWeight - 컨트롤의 텍스트 굵기입니다. Bold, Semibold, Normal 또는 Lighter로 설정합니다.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.Italic – Whether the text in a control is italic.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 아래쪽 가장자리 사이의 거리입니다.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 위쪽 가장자리 사이의 거리입니다.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed – 컨트롤을 누른 상태이면 True, 그렇지 않으면 false입니다.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – 컨트롤 왼쪽 아래 모서리의 둥근 정도입니다.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – 컨트롤 오른쪽 아래 모서리의 둥근 정도입니다.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – 컨트롤 왼쪽 위 모서리의 둥근 정도입니다.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – 컨트롤 오른쪽 위 모서리의 둥근 정도입니다.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – 0 이외의 값으로 설정된 경우 런타임 시 컨트롤의 탭 순서를 사용자 지정합니다.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – 컨트롤의 세로 가운데를 기준으로 한 텍스트의 위치입니다.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

Examples

단추에 기본 수식 추가Add a basic formula to a button

  1. 텍스트 입력 컨트롤을 추가하고 이름을 Source로 지정합니다.Add a Text input control, and name it Source.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?Don't know how to add, name, and configure a control?

  2. 단추 컨트롤을 추가하고 Text 속성을 "Add"로 설정하고 OnSelect 속성을 다음 수식으로 설정합니다.Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)})UpdateContext({Total:Total + Value(Source.Text)})

    UpdateContext 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the UpdateContext function or other functions?

  3. 레이블 컨트롤을 추가하고 Text 속성을 Total로 설정한 다음 F5를 누릅니다.Add a Label control, set its Text property to Total, and then press F5.
  4. 원본에서 기본 텍스트를 지우고 그 안에 숫자를 입력한 다음 추가를 클릭하거나 탭합니다.Clear the default text from Source, type a number in it, and then click or tap Add.

    레이블 컨트롤이 입력한 숫자를 보여 줍니다.The Label control shows the number that you typed.

  5. 원본에서 숫자를 지우고 그 안에 다른 숫자를 입력한 다음 추가를 클릭하거나 탭합니다.Clear the number from Source, type another number in it, and then click or tap Add.

    레이블 컨트롤이 입력한 두 숫자의 합계를 표시합니다.The Label control shows the sum of the two numbers that you typed.

  6. (선택 사항) 이전 단계를 한 번 이상 반복합니다.(optional) Repeat the previous step one or more times.
  7. 기본 작업 영역으로 돌아가려면 Esc를 누릅니다(또는 오른쪽 위 모서리에 있는 닫기 아이콘을 클릭하거나 탭합니다).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

여러 수식으로 단추 구성Configure a button with multiple formulas

입력 사이에 텍스트 입력 컨트롤을 지우는 수식을 추가합니다.Add a formula that clears the Text input control between entries.

  1. 원본HintText 속성을 "숫자 입력"으로 설정합니다.Set the HintText property of Source to "Enter a number".
  2. 추가OnSelect 속성을 이 수식으로 설정합니다.Set the OnSelect property of Add to this formula:

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

    참고

    여러 수식은 세미콜론 “;”으로 구분합니다.Separate multiple formulas with a semi-colon “;”.

  3. 원본기본 속성을 ClearInput으로 설정합니다.Set the Default property of Source to ClearInput.
  4. F5 키를 누른 다음 여러 숫자를 동시에 추가하여 앱을 테스트합니다.Press F5, and then test the app by adding several numbers together.

총계를 재설정하는 다른 단추 추가Add another button to reset the total

계산 사이에 합계를 지우는 두 번째 단추를 추가합니다.Add a second button to clear the total between calculations.

  1. 다른 단추 컨트롤을 추가하고 Text 속성을 "Clear"로 설정하고 OnSelect 속성을 다음 수식으로 설정합니다.Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. F5를 누르고 여러 숫자를 함께 추가한 다음 지우기를 클릭하거나 탭하여 총계를 재설정합니다.Press F5, add several numbers together, and then click or tap Clear to reset the total.

단추의 모양 변경Change a button's appearance

단추 모양 변경Change a button's shape

기본적으로 PowerApps는 모서리가 둥근 직사각 단추 컨트롤을 만듭니다.By default, PowerApps creates a rectangular Button control with rounded corners. 단추 컨트롤의 Height, WidthRadius 속성을 설정하여 기본적인 모양을 수정할 수 있습니다.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

참고

아이콘 및 셰이프는 다양한 디자인을 제공하며 단추 컨트롤이 수행하는 것과 동일한 기본 함수 중 일부를 수행할 수 있습니다.Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. 그러나 아이콘 및 셰이프에는 Text 속성이 없습니다.However, Icons and Shapes don’t have a Text property.

  1. 단추 컨트롤을 추가하고 HeightWidth 속성을 300으로 설정하여 큰 정사각 단추를 만듭니다.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. RadiusTopLeft, RadiusTopRight, RadiusBottomLeftRadiusBottomRight 속성을 수정하여 각 모서리의 곡률 정도를 조절합니다.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. 각각 300 x 300 정사각 단추에서 시작하는 다양한 셰이프의 예는 다음과 같습니다.Here are some examples of different shapes, each one starting from a 300 x 300 square button:

마우스로 가리킬 때 단추의 색 변경Change a button's color when you hover over it

기본적으로 단추 컨트롤의 채우기 색은 마우스로 가리킬 때 20% 흐려집니다.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. ColorFade 함수를 사용하는HoverFill 속성을 변경하여 이 동작을 조정할 수 있습니다.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. ColorFade 수식을 양의 백분율로 설정하면 마우스를 단추에 가져갔을 때 색이 더 밝아지며 음수로 설정하면 더 어두워집니다.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • 만든 단추 중 하나의 HoverFill 속성에서 ColorFade를 변경하고 결과를 확인합니다.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

ColorValue("Red")에서처럼 ColorFade 함수 대신 HoverFill 속성을 ColorValue 함수가 포함된 수식으로 설정하여 단추 색을 지정할 수도 있습니다. You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

참고

색 값은 이름 또는 16진 값의 CSS 색 정의가 될 수 있습니다.The color value can be any CSS color definition, either a name or a hex value.

  • 만든 버튼 중 하나에서 ColorFade 함수를 ColorValue 함수로 대체하고 결과를 확인합니다.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.