다음을 통해 공유


Breadcrumb 제어

탐색을 제공하는 데 사용되는 컨트롤입니다.

노트

GitHub 코드 구성 요소 리포지토리에서 전체 설명서 및 소스 코드를 확인할 수 있습니다.

Breadcrumb 제어.

Description

Breadcrumb 컨트롤은 앱이나 사이트에서 탐색 보조 도구로 사용해야 합니다. 계층 구조 내에서 현재 페이지의 위치를 나타내고 해당 계층의 나머지 부분과 관련하여 사용자가 위치를 이해하는 데 도움이 됩니다. 또한 Breadcrumb는 해당 계층의 상위 수준에 대한 원 클릭 액세스를 제공합니다.

이 코드 구성 요소는 캔버스 앱 및 사용자 지정 페이지에서 사용하기 위해 유창한 UI Breadcrumb 컨트롤 주위에 래퍼를 제공합니다.

속성

키 속성

Property Description
SelectedKey 이것은 선택된 키를 나타냅니다. 이것은 사용자가 컨트롤과 상호 작용할 때 OnChange 이벤트를 통해 업데이트됩니다.
Items 렌더링할 작업 항목

Items 속성

각 항목은 다음 스키마를 사용하여 구성 요소의 데이터를 시각화합니다.

입력 Description
ItemDisplayName breadcrumb 항목의 표시 이름입니다
ItemKey 어떤 항목이 선택되었는지 표시하고 하위 항목을 추가할 때 사용하는 키입니다. 키는 고유해야 합니다.
ItemClickable 특정 이동 경로 항목을 클릭할 수 없는 경우 false로 설정합니다.

Power Fx 수식 예:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

스타일 속성

입력 Description
Theme 유창한 UI 테마 디자이너(windows.net)를 사용하여 생성된 JSON 문자열을 허용합니다. 이 항목을 비워 두면 Power Apps에서 정의한 기본 테마가 사용됩니다. 설정 방법은 테마 설정을 참고하세요.
AccessibilityLabel 화면 읽기 프로그램 아리아-레이블
MaxDisplayedItems 병합하기 전에 표시할 최대 이동 경로 수입니다. 0이면 모든 이동 경로가 렌더링됩니다.
OverflowIndex 오버플로 항목이 축소될 선택적 인덱스입니다. 기본적으로는 0으로 설정됩니다.

이벤트 속성

입력 Description
InputEvent 컨트롤에 보낼 이벤트입니다. 예: SetFocus. 아래를 참조하십시오.

동작

SetFocusInputEvent로 지원합니다.

"선택 시" 동작 구성

구성 요소의 OnSelect 속성에서 Switch() 공식을 사용하여 컨트롤에서 선택한 ItemKey를 스위치 값으로 참조하여 각 항목에 대한 특정 작업을 구성합니다.

false 값을 Power Fx 언어의 적절한 표현식으로 바꿉니다.

이 컨트롤은 탐색에 사용되므로 논리적 작업은 탐색 기능을 사용하는 것입니다(이상적으로는 관련 데이터가 로드된 관련 화면에).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", false,
  
    /* Default action */
        false
  )

컨트롤에 포커스 설정

새 대화 상자가 표시되고 기본 포커스가 컨트롤에 있어야 하는 경우 명시적으로 설정된 포커스가 필요합니다.

입력 이벤트를 호출하려면 입력 이벤트 속성에 바인딩된 컨텍스트 변수를 SetFocus로 시작하고 그 뒤에 임의의 요소가 오는 문자열로 설정하여 앱이 이를 변경으로 감지하도록 할 수 있습니다.

Power Fx 수식 예:

UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));

그러면 컨텍스트 변수 ctxResizableTextareaEvent가 속성 입력 이벤트 속성에 바인딩됩니다.

제한 사항

이 코드 구성 요소는 캔버스 앱 및 사용자 정의 페이지에서만 사용할 수 있습니다.