PowerApps의 목록 상자 컨트롤List Box control in PowerApps

사용자가 하나 또는 여러 개의 항목을 선택할 수 있는 목록입니다.A list in which the user can select one or multiple items.

설명Description

목록 상자 컨트롤은 항상 사용 가능한 선택 항목을 모두 표시하며(드롭다운 컨트롤과 다름) 이중에서 사용자가 한번에 둘 이상의 항목을 선택할 수 있습니다(라디오 컨트롤과 다름).A List Box control always shows all available choices (unlike a Drop down control) and in which the user can choose more than one item at a time (unlike a Radio control).

주요 속성Key properties

Default – 사용자가 컨트롤을 변경하기 전의 초기 값입니다.Default – The initial value of a control before it is changed by the user.

Items – 갤러리, 목록 또는 차트와 같은 컨트롤에 표시되는 데이터 원본입니다.Items – The source of data that appears in a control such as a gallery, a list, or a chart.

Items The source of data that appears in a control such as a gallery, a list, or a chart.

When you add a gallery, a list, or a chart, the property list shows Items by default so that you can easily specify the data that the new control should show. For example, you might set the Items property of a gallery to the Account table in Salesforce, a table named Inventory that you created in Excel and uploaded to the cloud, or a SharePoint list named ConferenceSpeakers.

추가 속성Additional properties

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

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.

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.

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.

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.

ItemPaddingLeft – 목록 상자의 텍스트와 왼쪽 가장자리 사이의 거리입니다.ItemPaddingLeft – The distance between text in a listbox and its left edge.

LineHeight - 예를 들어 텍스트 선 또는 목록의 항목 사이의 거리입니다.LineHeight – The distance between, for example, lines of text or items in a list.

OnChange – 사용자가 컨트롤의 값을 변경할 때(예: 슬라이더 조절) 앱이 응답하는 방식입니다.OnChange – How the app responds when the user changes the value of a control (for example, by adjusting a slider).

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

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.

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.

Reset – 컨트롤이 기본값으로 되돌아가는지 여부입니다.Reset – Whether a control reverts to its default value.

SelectionColor – 목록에서 선택한 항목의 텍스트 색 또는 펜 컨트롤에 있는 선택 도구의 색입니다.SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.

SelectionFill – 목록에서 선택한 항목 또는 펜 컨트롤에서 선택한 영역의 배경색입니다.SelectionFill – The background color of a selected item or items in a list or a selected area of a pen control.

SelectMultiple – 사용자는 목록 상자에서 여러 항목을 선택할 수 있는지 여부를 선택합니다.SelectMultiple – Whether a user can select more than one item in a listbox.

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

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.

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).

Distinct( DataSource, ColumnName )Distinct( DataSource, ColumnName )

Example

  1. 목록 상자 컨트롤을 추가하고 이름을 CategoryList로 지정한 다음, Items 속성을 다음 수식으로 설정합니다.Add a List box control, name it CategoryList, and set its Items property to this formula:
    ["Carpet","Hardwood","Tile"]["Carpet","Hardwood","Tile"]

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

    목록 상자의 바닥재 범주

  2. 3개의 드롭다운 컨트롤을 추가하고 CategoryList 아래로 이동한 다음, 이름을 CarpetList, HardwoodListTileList로 지정합니다.Add three Drop down controls, move them under CategoryList, and name them CarpetList, HardwoodList, and TileList.

  3. 드롭다운 컨트롤의 Items 속성을 다음 값 중에 하나로 설정합니다.Set the Items property of each Drop down control to one of these values:

    • CarpetList: ["Caserta Stone Beige","Ageless Beauty Clay", "Lush II Tundra"]CarpetList: ["Caserta Stone Beige","Ageless Beauty Clay", "Lush II Tundra"]

    • HardwoodList: ["Golden Teak","Natural Hickory", "Victoria Mahogany"]HardwoodList: ["Golden Teak","Natural Hickory", "Victoria Mahogany"]

    • TileList: ["Honey Onyx Marble","Indian Autumn Slate", "Panaria Vitality Ceramic"]TileList: ["Honey Onyx Marble","Indian Autumn Slate", "Panaria Vitality Ceramic"]

      드롭다운 목록의 바닥재 이름

  4. 드롭다운 컨트롤의 Visible 속성을 다음 값 중에 하나로 설정합니다.Set the Visible property of each Drop down control to one of these values:

    • CarpetList: If("Carpet" in CategoryList.SelectedItems.Value, true)CarpetList: If("Carpet" in CategoryList.SelectedItems.Value, true)

    • HardwoodList: If("Hardwood" in CategoryList.SelectedItems.Value, true)HardwoodList: If("Hardwood" in CategoryList.SelectedItems.Value, true)

    • TileList: If("Tile" in CategoryList.SelectedItems.Value, true)TileList: If("Tile" in CategoryList.SelectedItems.Value, true)

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

  5. F5 키를 누르고 CategoryList에서 여러 개의 항목을 선택합니다.Press F5, and then choose one or more items in CategoryList.

    선택 항목에 따라 적절한 드롭다운 컨트롤이 나타납니다.The appropriate Drop down control or controls appear based on your choice or choices.

    드롭다운 목록의 바닥재 이름

  6. (선택 사항) 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.(optional) Press Esc to return to the default workspace.

접근성 지침Accessibility guidelines

색 대비Color contrast

다음 사이에 적절한 색 대비가 있어야 합니다.There must be adequate color contrast between:

이는 표준 색 대비 요구 사항에 추가됩니다.This is in addition to the standard color contrast requirements.

화면 판독기 지원Screen reader support

키보드 지원Keyboard support

  • 키보드 사용자가 탐색할 수 있도록 TabIndex 가 0 이상이어야 합니다.TabIndex must be zero or greater so that keyboard users can navigate to it.

  • 포커스 표시기가 명확하게 표시되어야 합니다.Focus indicators must be clearly visible. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    참고

    Tab 키는 목록 상자로 이동하거나 멀어지도록 이동합니다.The tab key navigates to or away from the List box. 화살표 키는 목록 상자의 콘텐츠를 탐색합니다.Arrow keys navigate the contents of the List box.