Breadcrumb 제어
탐색을 제공하는 데 사용되는 컨트롤입니다.
노트
GitHub 코드 구성 요소 리포지토리에서 전체 설명서 및 소스 코드를 확인할 수 있습니다.
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 . 아래를 참조하십시오. |
동작
SetFocus를 InputEvent
로 지원합니다.
"선택 시" 동작 구성
구성 요소의 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
가 속성 입력 이벤트 속성에 바인딩됩니다.
제한 사항
이 코드 구성 요소는 캔버스 앱 및 사용자 정의 페이지에서만 사용할 수 있습니다.