PowerApps의 도형 컨트롤 및 아이콘 컨트롤Shape controls and Icon controls in PowerApps

모양 및 동작 속성을 구성할 수 있는 그래픽입니다.Graphics for which you can configure appearance and behavior properties.

설명Description

이러한 컨트롤에는 fill, size 및 location 등의 속성을 구성할 수 있는 화살표, 기하학적 도형, 작업 아이콘 및 기호가 있습니다.These controls include arrows, geometric shapes, action icons, and symbols for which you can configure properties such as fill, size, and location. 구성할 수도 있습니다 해당 OnSelect 속성 앱이 사용자가 컨트롤을 선택 하는 경우 응답 수 있도록 합니다.You can also configure their OnSelect property so that the app responds if the user selects the control.

키 속성 (아이콘 및 셰이프)Key properties (icons and shapes)

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

OnSelect – 사용자가 컨트롤을 선택 하는 경우 앱이 응답 하는 방법입니다.OnSelect – How the app responds when the user selects a control.

키 속성 (아이콘에만 해당)Key properties (icons only)

아이콘 -표시할 아이콘 유형 (예를 들어 ArrowDown 하거나 ShoppingCart).Icon - The type of icon to display (for example, ArrowDown or ShoppingCart).

회전 -아이콘 회전 각도 (도)의 수입니다.Rotation - The number of degrees to rotate the icon.

-이름이 나 RGBA 값으로 아이콘의 색입니다.Color - The color of the icon by name or RGBA values.

추가 속성Additional properties

AccessibleLabel – 화면 읽기 프로그램의 레이블입니다.AccessibleLabel – Label for screen readers.

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

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

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

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

PressedBorderColor – 사용자가 해당 컨트롤을 선택 하면 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user selects that control.

PressedFill – 사용자가 해당 컨트롤을 선택 하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user selects that control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard-navigation order in relation to other controls.

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, ScreenTransition )Navigate( ScreenName, ScreenTransition )

Example

  1. 기본 화면 컨트롤의 이름을 Target으로 지정하고 레이블 컨트롤을 추가하며 Text 속성을 Target을 표시하도록 설정합니다.Name the default Screen control Target, add a Label control, and set its Text property to show Target.

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

  2. 화면 컨트롤을 추가하고 이름을 Source로 지정합니다.Add a Screen control, and name it Source.

  3. Source에서 도형 컨트롤을 추가하고 OnSelect 속성을 다음 수식으로 설정합니다.In Source, add a Shape control, and set its OnSelect property to this formula:

Navigate(Target, ScreenTransition.Fade)

  1. F5 키를 누른 다음을 선택 합니다 셰이프 제어 합니다.Press F5, and then select the Shape control.

    Target 화면이 나타납니다.The Target screen appears.

  2. (선택 사항) Esc 키를 눌러 기본 작업 영역으로 돌아가고 도형 컨트롤을 Target에 추가한 다음, 도형 컨트롤의 OnSelect 속성을 다음 서식으로 설정합니다.(optional) Press Esc to return to the default workspace, add a Shape control to Target, and set the OnSelect property of the Shape control to this formula:

Navigate(Source, ScreenTransition.Fade)

접근성 지침Accessibility guidelines

색 대비Color contrast

다음은 단추로 사용되거나 장식용으로만 사용되지 않는 그래픽에만 적용됩니다.The following applies only to graphics that are used as buttons or are otherwise not just for decoration.

아이콘:For icons:

테두리가 있는 도형:For shapes with borders:

테두리가 없는 도형:For shapes without borders:

  • Fill 및 컨트롤 외부 색Fill and the color outside the control
  • PressedFill 및 컨트롤 외부 색(단추로 사용되는 경우)PressedFill and the color outside the control (if used as a button)
  • HoverFill 및 컨트롤 외부 색(단추로 사용되는 경우)HoverFill and the color outside the control (if used as a button)

화면 reader 지원Screen-reader support

  • AccessibleLabel 그래픽이 단추로 사용 되거나 데코레이션에 뿐 아니라이 고 그렇지 않으면 비어 있지 않은 문자열로 설정 해야 합니다.AccessibleLabel must be set to a non-empty string if the graphic is used as a button or is otherwise not just for decoration.

  • AccessibleLabel 비어 있거나 빈 문자열 이어야 합니다 "" 그래픽이 중복 정보를 제공 하거나 장식용 경우.AccessibleLabel must be empty or the empty string "" if the graphic provides redundant information or is purely for decoration. 이 값 하면 화면 읽기 프로그램이 그래픽을 무시 합니다.This value causes screen readers to ignore the graphic.

예를 들어, 설정할 수 있습니다 합니다 AccessibleLabel 속성을 설정 아이콘을 설정합니다.For example, you might set the AccessibleLabel property of a Settings icon to Settings. 이 아이콘은 단추로 사용 되지 않습니다.This icon isn't used as a button. 옆에 레이블을 도 표시 된 설정합니다.It's next to a Label that also says Settings. 화면 판독기는 모두 아이콘으로 읽고 레이블을 읽습니다 설정을, 하는 경우 작업이 번거롭습니다.Screen readers will read both the icon and the label as Settings, which is unnecessarily verbose. 아이콘 필요 하지 않습니다는 경우에 AccessibleLabel 합니다.In this case, the icon doesn't need an AccessibleLabel.

중요

AccessibleLabel 이 빈 문자열로 설정되고 TabIndex 가 0 이상으로 설정된 경우 화면 읽기 프로그램은 아이콘 또는 도형을 버튼으로 읽습니다. .Screen readers will read read an icon or shape as button if its AccessibleLabel is set to an empty string and its TabIndex is set to zero or greater. 이러한 아이콘이나 도형은 버튼으로 렌더링됩니다.Such icons or shapes are rendered as buttons.

키보드 지원Keyboard support

  • TabIndex 0 이어야 하며 그래픽이 단추로 사용 되는 경우에 큽니다.TabIndex must be zero or greater if the graphic is used as a button. 아이콘 또는 셰이프에 대해이 값으로 설정한 경우 키보드 사용자가 탐색할 수 있습니다.If you set this value for an icon or shape, keyboard users can navigate to it.

  • 포커스 표시기는 명확 하 게 그래픽이 단추로 사용 되는 경우에 표시 되어야 합니다.Focus indicators must be clearly visible if the graphic is used as a button. 사용 하 여 FocusedBorderColor 하 고 FocusedBorderThickness 이 결과 얻을 수 있습니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this result.

    참고

    TabIndex 가 0 이상이면 아이콘 또는 도형이 단추로 렌더링됩니다.When TabIndex is zero or greater, the icon or shape is rendered as a button. 모양을 변경 하지 않습니다 하지만 화면 읽기 프로그램 단추와 이미지를 올바르게 식별 됩니다.Its appearance doesn't change, but screen readers will correctly identify the image as a button. TabIndex 가 0보다 작으면 아이콘 또는 도형은 이미지로 식별됩니다.When TabIndex is less than zero, the icon or shape is identified as an image.