ContextMenu 控制
用於輸入命令的控制項。
Note
完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。
描述
關聯式功能表 (ContextMenu) 是根據選取的內容、滑鼠暫留或鍵盤焦點而定的命令清單。 它們是最有效和最常用的命令介面之一，可用於各種地方。
此程式碼元件為繫結至按鈕的 Fluent UI ContextualMenu 控制項提供了一個包裝函式，以便在畫布應用程式和自訂頁面中使用。
內容
索引鍵屬性
| 屬性 | 描述 |
|---|---|
Items |
要呈現的動作項目。 第一個項目會視為根項目。 |
Items 性能
| 姓名 | 描述 |
|---|---|
ItemDisplayName |
功能表項目的顯示名稱。 |
ItemKey |
用於指示選擇哪個項目以及新增子項目時的索引鍵。 索引鍵必須是唯一的。 |
ItemEnabled |
如果選項已停用，則設定為 False。 |
ItemVisible |
如果選項不可見，則設定為 False。 |
ItemChecked |
如果已選取選項，則設為 True。 |
ItemIconName |
要使用的 Fluent UI 圖示 (請參閱 Fluent UI 圖示) |
ItemIconColor |
用來呈現圖示的顏色 (例如，命名的、RGB 或十六進位值)。 |
ItemIconOnly |
不要顯示文字標籤，只顯示圖示。 |
ItemHeader |
將項目呈現為區段標題。 如果有項目的 ItemParentKey 設定為該項目的索引鍵，則它們將作為語義分組的項目新增到此區段下。 |
ItemTopDivider |
在該區段的頂端呈現一條分隔線。 |
ItemDivider |
將項目呈現為區段分隔線，或如果項目為標題 (ItemHeader = true)，則控制是否要在區段底端呈現分隔線。 |
ItemParentKey |
將選項呈現為另一個選項的下層項目。 |
Note
ItemIconColor將覆蓋元件的 Theme 值並忽略其他狀態顏色 (例如，disabled)。ItemHeader並且必須ItemDivider設置為 true 才能呈現為分隔線。 若設定為 false，它會預期其他值，並將呈現為空白。- 新增子功能表項目的
ItemChecked屬性與行為，將會阻止子功能表在按一下時關閉。
範例
Items 的範例 Power Fx 公式：
Table(
{
ItemKey: "File",
ItemIconName: "save",
ItemDisplayName: "Save",
ItemOverflow:true
},
{
ItemKey: "Delete",
ItemIconName: "Delete",
ItemDisplayName: "Delete",
ItemOverflow:true
}
)
樣式屬性
| 屬性 | 描述 |
|---|---|
Theme |
接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南，請參閱佈景主題。 |
Chevron |
顯示或隱藏根按鈕上的下拉箭號 |
IconColor |
選用。 內容選單鍵上的圖示顏色。 |
HoverIconColor |
選用。 將滑鼠懸停在選單鍵上時的圖示顏色。 |
IconSize |
選用。 內容選單鍵上的圖示大小 (以像素為單位)。 |
FontSize |
選用。 內容選單鍵上的文字大小 (以像素為單位)。 |
FontColor |
選用。 內容選單鍵上的文字顏色。 |
HoverFontColor |
選用。 將滑鼠懸停在選單鍵上時的文字顏色。 |
FillColor |
選用。 內容選單鍵的背景顏色。 |
HoverFillColor |
選用。 將滑鼠懸停在選單鍵上時的背景顏色。 |
TextAlignment |
按鈕文字的對齊方式。 可能的值：置中、靠左或靠右 |
AccessibilityLabel |
螢幕助讀程式 aria-label |
事件屬性
| 屬性 | 描述 |
|---|---|
InputEvent |
要傳送到控制項的事件。 例如 SetFocus。 請參閱下文。 |
行為
支援將 SetFocus 視為 InputEvent。
設定「選取時」行為
使用組件的 OnSelect 屬性中的 Switch() 公式，透過參考控制項件選擇的 ItemKey 作為開關值，為每個項目設定特定的動作。
用 Power Fx 語言中的適當運算式替換 false 值。
Switch( Self.Selected.ItemKey,
/* Action for ItemKey 1 */
"File", false,
/* Action for ItemKey 2 */
"Delete", false,
/* Default action */
false
)
在控制項上設定焦點
當顯示新對話方塊，且預設焦點應在控制項上時，將需要明確設定焦點。
若要呼叫輸入事件，您可以將繫結至 Input Event 屬性的內容變數設定為以 SetFocus 開頭且後面跟著隨機元素的字串，以確保應用程式會將其偵測為變更。
例如
UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));
然後，內容變數 ctxResizableTextareaEvent 會繫結至屬性 Input Event 屬性。
限制
此程式碼元件只能在畫布應用程式和自訂頁面中使用。