ContextMenu コントロール
コマンドの入力に使用されるコントロール。
Note
説明書の全文とソース コードは、GitHub コード コンポーネント リポジトリ を参照してください。
説明設定
コンテキスト メニュー (ContextMenu) は、選択、マウス カーソル、またはキーボード フォーカスのコンテキストに基づくコマンドのリストです。 これらは最も効果的で使用頻度の高いコマンド サーフェスの 1 つであり、さまざまな場所で使用できます。
このコード コンポーネントは、キャンバス アプリおよびカスタム ページで使用するためにボタンにバインドされた Fluent UI ContextualMenu コントロールのラッパーを提供します。
プロパティ
重要なプロパティ
| Property | 説明設定 |
|---|---|
Items |
レンダリングするアクション項目。 最初の項目がルート項目と見なされます。 |
Items プロパティ
| 件名 | 説明設定 |
|---|---|
ItemDisplayName |
メニュー項目の表示名。 |
ItemKey |
選択されている項目を示すため、およびサブ項目を追加するときに使用するキー。 キーは一意である必要があります。 |
ItemEnabled |
オプションが無効になっている場合は、false に設定します。 |
ItemVisible |
オプションが表示されない場合は、false に設定します。 |
ItemChecked |
オプションがチェックされている場合、true に設定されます。 |
ItemIconName |
使用する Fluent UI アイコン (Fluent UI アイコンを参照) |
ItemIconColor |
アイコンをレンダリングする色 (たとえば、名前付き、RGB、または 16 進数値)。 |
ItemIconOnly |
テキスト ラベルを表示しない - アイコンのみ。 |
ItemHeader |
項目をセクション ヘッダーとしてレンダリングします。 この項目のキーに ItemParentKey が設定されている項目がある場合、この項目の下に意味的にグループ化された項目として追加されます。 |
ItemTopDivider |
セクションの上部に仕切りをレンダリングします。 |
ItemDivider |
項目をセクション ディバイダーとしてレンダリングします。または、項目がヘッダー (ItemHeader = true) の場合は、セクションの下部にディバイダーをレンダリングするかどうかを制御します。 |
ItemParentKey |
オプションを別のオプションの子項目としてレンダリングする。 |
Note
ItemIconColorコンポーネントのテーマ値を上書きし、他の状態の色 (無効など) を無視します。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
}
)
スタイル プロパティ
| Property | 説明設定 |
|---|---|
Theme |
Fluent UI テーマ デザイナー (windows.net) を使用して生成された JSON 文字列を受け入れます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 構成方法に関するガイドラインは、テーマ を参照してください。 |
Chevron |
ルート ボタンの下向きシェブロンを表示または非表示にする |
IconColor |
オプション。 コンテキスト メニューボタンのアイコンの色。 |
HoverIconColor |
オプション。 コンテキスト メニューボタンにカーソルを合わせた際のアイコンの色。 |
IconSize |
オプション。 コンテキスト メニュー ボタンのアイコンのサイズ (ピクセル単位)。 |
FontSize |
オプション。 コンテキスト メニュー ボタンのテキストのサイズ (ピクセル単位)。 |
FontColor |
オプション。 コンテキスト メニュー ボタンに表示する文字の色を指定します。 |
HoverFontColor |
オプション。 コンテキスト メニューボタンにカーソルを合わせた際のテキストの色を指定します。 |
FillColor |
オプション。 コンテキスト メニュー ボタンの背景色を指定します。 |
HoverFillColor |
オプション。 コンテキスト メニュー ボタンにカーソルを合わせた際の背景色を指定します。 |
TextAlignment |
ボタン テキストの位置合わせを指定します。 可能な値: 中央、左、右 |
AccessibilityLabel |
スクリーン リーダーの aria-label |
イベントのプロパティ
| Property | 説明設定 |
|---|---|
InputEvent |
コントロールに送信するイベント。 例: SetFocus。 以下を参照してください。 |
Behavior
SetFocus を InputEvent としてサポートします。
「選択時」の動作を構成する
コンポーネントの OnSelect プロパティの Switch() 式を使用し、コントロールの選択された ItemKey をスイッチの値として参照して、各アイテムの特定のアクションを構成します。
false の値を Power Fx 言語の適切な式に置き換えます。
Switch( Self.Selected.ItemKey,
/* Action for ItemKey 1 */
"File", false,
/* Action for ItemKey 2 */
"Delete", false,
/* Default action */
false
)
コントロールにフォーカスを設定する
新しいダイアログが表示され、デフォルトのフォーカスがコントロールにある場合、明示的なフォーカスの設定が必要になります。
入力イベントを呼び出すには、Input Eventプロパティにバインドされたコンテキスト変数を、SetFocus で始まり、その後にランダムな要素が続く文字列に設定して、アプリが変更として検出できるようにします。
E.g.
UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));
そして、コンテキスト変数 ctxResizableTextareaEvent は、プロパティ Input Event のプロパティにバインドされます。
制限
このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。