Breadcrumb 控制
用來提供瀏覽的控制項。
Note
完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。
描述
Breadcrumb
控件應用作 App 或 Site 中的導航輔助工具。 它們表示目前頁面在階層中的位置,並協助使用者了解它們相對於該階層的其餘部分的位置。 階層連結也提供對較該階層更高層級的一鍵存取。
此程式碼元件為 Fluent UI Breadcrumb 控制項提供了一個包裝函式,以便在畫布應用程式和自訂頁面中使用。
內容
索引鍵屬性
屬性 | 描述 |
---|---|
SelectedKey |
這表示選取的索引鍵。 當使用者與控制項互動時,會透過 OnChange 事件來更新此項。 |
Items |
要呈現的動作項目 |
Items
性能
每個項目都使用下列結構描述來視覺化元件中的資料。
姓名 | 描述 |
---|---|
ItemDisplayName |
階層連結項目的顯示名稱 |
ItemKey |
用於指示選擇哪個項目以及新增子項目時的索引鍵。 索引鍵必須是唯一的。 |
ItemClickable |
設定為 False,以防特定的階層連結項目無法點擊。 |
範例 Power Fx 公式:
Table(
{
ItemKey: "1",
ItemDisplayName: "General",
ItemClickable: true
},
{
ItemKey: "2",
ItemDisplayName: "Document",
ItemClickable: true
}
)
樣式屬性
姓名 | 描述 |
---|---|
Theme |
接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南,請參閱佈景主題。 |
AccessibilityLabel |
螢幕助讀程式 aria-label |
MaxDisplayedItems |
聯合前顯示的最大階層連結數。 如果為零,則會呈現所有的階層連結。 |
OverflowIndex |
將折疊溢出專案的選擇性索引。 預設值為零。 |
事件屬性
姓名 | 描述 |
---|---|
InputEvent |
要傳送到控制項的事件。 例如 SetFocus 。 請參閱下文。 |
行為
支援將 SetFocus 視為 InputEvent
。
設定「選取時」行為
使用組件的 OnSelect
屬性中的 Switch() 公式,透過參考控制項件選擇的 ItemKey
作為開關值,為每個項目設定特定的動作。
用 Power Fx 語言中的適當運算式替換 false
值。
因為此控制項是用來瀏覽的,所以邏輯動作是使用瀏覽功能 (理想情況下是使用已載入相關資料的相關畫面)。
Switch( Self.Selected.ItemKey,
/* Action for ItemKey 1 */
"1", false,
/* Action for ItemKey 2 */
"2", false,
/* Default action */
false
)
在控制項上設定焦點
當顯示新對話方塊,且預設焦點應在控制項上時,將需要明確設定焦點。
若要呼叫輸入事件,您可以將繫結至 Input Event 屬性的內容變數設定為以 SetFocus
開頭且後面跟著隨機元素的字串,以確保應用程式會將其偵測為變更。
範例 Power Fx 公式:
UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));
然後,內容變數 ctxResizableTextareaEvent
會繫結至屬性 Input Event 屬性。
限制
此程式碼元件只能在畫布應用程式和自訂頁面中使用。