CommandBar 控制 (預覽版)

發行項
10/16/2024

用於輸入命令的控制項。

Note

完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。

CommandBar 控制項。

描述

CommandBar 是一個圖面，其中包含對視窗、面板或其所在的父系區域的內容進行操作的命令。

此程式碼元件為 Fluent UI CommandBar 控制項提供了一個包裝函式，以便在畫布應用程式和自訂頁面中使用。

內容

索引鍵屬性

屬性	描述
`Items`	要呈現的動作項目

項目結構

每個項目都使用下列結構描述來視覺化元件中的資料。

姓名	描述
`ItemDisplayName`	命令列項目的顯示名稱。
`ItemKey`	用於指示選擇哪個項目以及新增子項目時的索引鍵。索引鍵必須是唯一的。
`ItemEnabled`	如果選項已停用，則設定為 False。
`ItemVisible`	如果選項不可見，則設定為 False。
`ItemChecked`	若已選取該選項 (例如，命令列中的分割按鈕)，請設為 True。
`ItemSplit`	若可以按一下該選項，並將其當做下拉彈出式視窗，則設為 True。
`ItemIconName`	要使用的 Fluent UI 圖示 (請參閱 Fluent UI 圖示)
`ItemIconColor`	用來呈現圖示的顏色 (例如，命名的、RGB 或十六進位值)。
`ItemIconOnly`	不要顯示文字標籤，只顯示圖示。
`ItemOverflow`	為溢位行為設定為 True
`ItemOverflow`	在溢出項目中呈現選項。
`ItemFarItem`	在命令列的遠項目群組中呈現選項。
`ItemHeader`	將項目呈現為區段標題。如果有項目的 `ItemParentKey` 設定為該項目的索引鍵，則它們將作為語義分組的項目新增到此區段下。
`ItemTopDivider`	在該區段的頂端呈現一條分隔線。
`ItemDivider`	將項目呈現為區段分隔線，或如果項目為標題 (ItemHeader = true)，則控制是否要在區段底端呈現分隔線。
`ItemParentKey`	將選項呈現為另一個選項的下層項目。

Note

ItemIconColor 將覆蓋元件的 Theme 值並忽略其他狀態顏色 (例如，disabled)。
ItemHeader 並且必須 ItemDivider 設置為 true 才能呈現為分隔線。若設定為 false，它會預期其他值，並將呈現為空白。

範例

基本 Items 的範例 Power Fx 公式：

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

樣式屬性

屬性	描述
`Theme`	接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。將此留空將使用 Power Apps 定義的預設主題。有關如何設定的指南，請參閱佈景主題。
`AccessibilityLabel`	螢幕助讀程式 aria-label

事件屬性

屬性	描述
`InputEvent`	要傳送到控制項的事件。例如 `SetFocus`。

行為

支援將 SetFocus 視為 InputEvent。

設定「選取時」行為

使用組件的 OnSelect 屬性中的 Switch() 公式，透過參考控制項件選擇的 ItemKey 作為開關值，為每個項目設定特定的動作。

用 Power Fx 語言中的適當運算式替換 false 值。

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", false,
  
    /* Default action */
        false
  )

在控制項上設定焦點

當顯示新對話方塊，且預設焦點應在控制項上時，將需要明確設定焦點。

若要呼叫輸入事件，您可以將繫結至 Input Event 屬性的內容變數設定為以 SetFocus 開頭且後面跟著隨機元素的字串，以確保應用程式會將其偵測為變更。

範例 Power Fx 公式：

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

然後，內容變數 ctxResizableTextareaEvent 會繫結至屬性 Input Event 屬性。

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。

在元件設計挑戰中查看更多限制說明。

共用方式為